等待ajax请求在React中完成？

下面是我的react代码，我希望首先执行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;

外部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;

---

任何建议

我不知道请求库，但ajax默认是异步的。如果希望ajax执行同步请求，应执行以下操作：

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

---

重要提示：

async:false

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

与其使其同步，不如使用函数更好地处理异步行为，比如在函数中的内部控制台登录后包装您想要运行的任何东西：（我将其称为outside（）），这将输出“inned ajax”、“outside 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);
    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;

---

如果您想阻止某些代码执行，除非ajax请求完成处理，请将该代码（无论是外部代码）放入

then（）

。否则，

console.log（“外部”）

将始终首先执行，因为

then（）

中的代码只有在收到响应后才会执行。@SangeethSudheer:我之前做过这件事，但它给出了一个错误声明`警告：UserItems（…）：必须返回有效的React元素（或null）。您可能返回了未定义的数组或其他无效对象。我正在使用jquery约定来执行此操作，并使用react with superagent进行api调用。您应该查看库api文档，我认为它应该具有该设置。