javascript - 如何在 Javascript 中通知上次 Web 服务调用何时完成？

Question

我想调用这段代码:

this.setState({ // <------------ CODE 1
  pages: pages
});

仅当所有 axios.get('https://graph.facebook.com/v5.0/' + page.id + '/events?access_token=' + accessToken) 完成时。 代码2

如何用Javascript实现它？

let accessToken = response.accessToken
axios.get('https://graph.facebook.com/v5.0/me/accounts?fields=id,name&access_token=' + response.accessToken)
.then(response => {
console.log("test")
let pageList = response.data.data.map(page => {
  console.log("page " + page.id + " " + page.name);
  this.setState({
    page: response.data.data
  });

  var pages = {}; // <------------ CODE 2
  axios.get('https://graph.facebook.com/v5.0/' + page.id + '/events?access_token=' + accessToken)
  .then(response => {
    console.log("test 2");
    var events = {};
    let eventList = response.data.data.map(event => {
      console.log("event " + event.id + " " + event.name);
      events[event.id] = event.name;
    });
    pages[page.id] = [page.name, events];
  })

  this.setState({ // <------------ CODE 1
    pages: pages
  });
})
})

Answer 1

为了等待每一个Promise要在设置状态之前完成，我们可以利用 Promise.all 。然而，如果一个 Promise 拒绝，Promise.all 将取消所有请求。这就是我们添加 .catch(e => e) 的原因，它真正做的就是捕获任何拒绝并将其定期传递给 Promise.all，就像解决的 Promise 一样。

与 await 结合，我们可以等待 Promise.all，然后循环结果、调用 setState 或任何您真正喜欢的内容。

let accessToken = response.accessToken;
axios
  .get(
    "https://graph.facebook.com/v5.0/me/accounts?fields=id,name&access_token=" +
      response.accessToken
  )
  .then(async pagesResponse => {
    console.log("test");
    let promisesArray = pagesResponse.data.data.map(async page => {
      console.log("page " + page.id + " " + page.name);
      this.setState({
        page: response.data.data
      });

      return axios
        .get(
          "https://graph.facebook.com/v5.0/" +
            page.id +
            "/events?access_token=" +
            accessToken
        )
        .catch(e => e);
    });

    const responses = await Promise.all(promisesArray);
    var pages = {}; // <------------ CODE 2
    responses.forEach((response, i) => {
      console.log("test 2");
      var events = {};
      let eventList = response.data.data.map(event => {
        console.log("event " + event.id + " " + event.name);
        events[event.id] = event.name;
      });
      const page = pagesResponse.data.data[i];
      pages[page.id] = [page.name, events];
    });

    this.setState({
      // <------------ CODE 1
      pages: pages
    });
  });

希望一切都清楚!如果您需要任何进一步的解释，请告诉我。