Question

下面是我想要的反应代码，首先应该执行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;

任何建议!!!

Answer 1

正如hainguyen指出的那样，ajax通常是异步的，因此之后的代码将一直运行直到请求完成，此时内部函数被执行。因此，外部控制台日志几乎肯定会在您的代码中首先运行。虽然有很多方法可以解决这个问题，但hainguyen指出，大多数建议不要这样做。 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);
    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;

Answer 2

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

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

重要行：async: false

等待在React中完成ajax请求？

2 个答案: