在同一个函数中进行两次调用

Question

我有两个请求，一个 GET 和一个 POST 请求，我正在获取 GET 请求并在数组内部设置响应状态，我想将此数组传递给 POST 请求正文，然后我正在获取 POST 请求所以我可以打电话，问题是它没有在 GET 调用中设置状态，它总是返回未定义，我不知道为什么，这里是代码：

我的构造函数：

constructor(props){
  super(props);
  this.state = {
    info: [],
  }
}

功能：

myFunction = async () => {
  fetch("https://myapp.com/info", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "x-auth-token": token
    }
  })
    .then(res => res.json())
    .then(response => {
      this.setState({ info: response });
      fetch("https://myapp.com/submit_info", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-auth-token": token
        },
        body: JSON.stringify({
          infoID: this.state.info.id
        })
      })
        .then(res => res.json())
        .then(result => {
          console.log(result);
        });
    })
    .catch(error => console.log(error));
};

Answer 1

您忘记返回承诺，然后使用 response 对象设置 infoID 字段而不是状态，因为对 this.setState 的调用是异步的，并且在您进行第二次 api 调用时仍将处于挂起状态。

myFunction = () => {
  fetch("https://myapp.com/info", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "x-auth-token": token
    }
  })
    .then(res => res.json())
    .then(response => {
      this.setState({ info: response }); // async call
      return fetch("https://myapp.com/submit_info", {
        // return promise for chaining
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-auth-token": token
        },
        body: JSON.stringify({
          infoID: response.id
        })
      })
        .then(res => res.json())
        .then(result => {
          console.log(result);
        });
    })
    .catch(error => console.log(error));
};