等待在React中完成ajax请求？

-1

以下是我的反应代码，我希望首先执行ajax代码，然后执行其余的代码。等待在React中完成ajax请求？

在控制台预期输出：

内部AJAX

外AJAX

在控制台

电流输出：

外AJAX

内部AJAX

import React from 'react'; 
import request from 'superagent' 

const UserItems =() => { 
request.get('http://localhost:4000/user/1/items.json') 
.then((res, err) => { 
    if (err) { 
     console.log("errror found") 
    } 
    var data = JSON.parse(res.text) 
    console.log("inside ajax") 
    console.log(data) 

    }) 

console.log("outside ajax") 
console.log(data) 
}; 

export default UserItems;

任何建议！

来源

2016-08-31 ashwintastic

如果你想阻止一些代码执行，除非和直到ajax请求完成处理，否则把这个代码（不管在外面）放在'then（）'中。否则，'console.log（“outside”）'将始终执行，因为'then（）'中的代码只会在收到响应后才执行。 –

@SangeethSudheer：早些时候我做了这个，但它给了我错误，说明 'Warning：UserItems（...）：必须返回一个有效的React元素（或null）。你可能已经返回undefined，一个数组或其他无效的对象。' – ashwintastic

我不知道请求库，但ajax默认是异步的。如果你想AJAX进行同步请求，你应该做这样的事情：

function getRemote() { 
    return $.ajax({ 
    type: "GET", 
    url: remote_url, 
    async: false 
    }).responseText; 
}

重要防线：async: false

来源

2016-08-31 08:04:16 hainguyen

它的jQuery约定来做到这一点，我正在使用与superagent的API调用作出反应。 – ashwintastic

你应该看看库API文档，我认为它应该有这样的设置。 – hainguyen

由于hainguyen指出，Ajax是典型的异步的代码之后将运行，直到请求完成，此时执行内部函数。所以外部控制台日志几乎肯定会在您的代码中首先运行。虽然hainguyen指出有办法解决这个问题，但大多数人建议不要这样做。 Ajax是需要时间的，因此你的代码结构应该反映这一点。如果您发现自己希望在处理ajax请求时运行代码，则可能不喜欢同步结构。我的“我无人等待”日志显示了异步方法的强大功能，因为该逻辑将快速运行，而您通常会等待请求而无法执行任何操作。

而不是让它同步为什么不使用函数来处理异步行为更好，就像在内部控制台登录函数后包装你想要运行的任何东西一样:(我称之为outside（））这将输出“inside ajax” ，“外部ajax”。这样你就可以在你的ajax return上创建依赖关系，并且仍然可以选择在此期间运行的东西。

import React from 'react'; 
import request from 'superagent'; 

const UserItems =() => { 
request.get('http://localhost:4000/user/1/items.json') 
.then((res, err) => { 
    if (err) { 
     console.log("errror found"); 
    } 
    var data = JSON.parse(res.text); 
    console.log("inside ajax"); 
    console.log(data); 
    outside(); 
    }); 

    function outside(){ 
    console.log("outside ajax"); 
    console.log(data); 
    } 

    console.log("I wait for no one, run me as quick as possible!"); 
}; 

export default UserItems;

来源

2016-08-31 16:11:13 Nate

等待在React中完成ajax请求？

回答

相关问题