Promise.all 不等待函数完成答案

【问题标题】：Promise.all is not waiting for the functions to finishPromise.all 不等待函数完成
【发布时间】：2018-06-22 19:22:08
【问题描述】：

我正在玩一些涉及承诺的异步调用（AXIOS 调用）。代码的问题是 this.reloadData() 在 this.updateUsers() 和 this.updateEmails() 执行和完成之前被调用。等待两个函数完成，然后调用 this.reloadData() 的正确方法是什么？

rest.putEmail 和 rest.putUser 都是 axios REST API 调用。

mainFunc() {
         Promise.all([this.updateUsers(), this.updateEmails()]).then(() => {
              this.reloadData();
         })

}

updateEmails() {
    const {emails} = this.state;
    if (emails.length > 0) {
         emails.map(user => {
               rest.putEmail(email.id, email.content)
                   .catch(err => {this.error(err)});
          });
    }
}

updateUsers() {
        const {users} = this.state;
        if (users.length > 0) {
             users.map(user => {
                   rest.putUser(user.id, user.name)
                       .catch(err => {this.error(err)});
              });
          }
    }

【问题讨论】：

为了让它工作，你的函数需要返回承诺
@dave im 为集合中的每个项目调用 rest 调用。我怎样才能将所有这些包装成一个承诺然后返回它？
How to run after all javascript ES6 Promises are resolved的可能重复
@ssss 你已经在你的第一个函数中这样做了：Promise.all() 就是答案。

标签： javascript reactjs promise axios

【解决方案1】：

如 cmets 中所述，您的 updateEmails() 和 updateUsers() 函数不返回承诺，Promise.all 接受 promises 数组作为参数。在这种情况下，您将 undefined 作为参数传递给 Promise.all，因此它不会等待 updateEmails() 或 updateUsers() 执行。

要解决这个问题，您需要将所有的 Promise 调用放入一个数组中，将该数组提供给 Promise.all，然后在 updateEmails() 和 updateUsers() 函数中返回该数组。

mainFunc() {
  Promise.all([this.updateUsers(), this.updateEmails()]).then(() => {
    this.reloadData();
  })
}

updateEmails() {
  const {emails} = this.state;
  if (emails.length > 0) {
    const promises = emails.map(user => {
        rest.putEmail(email.id, email.content)
            .catch(err => {this.error(err)});
    });
    return Promise.all(promises);
  }
}

updateUsers() {
  const {users} = this.state;
  const promises = [];
  if (users.length > 0) {
    const promises = users.map(user => {
      rest.putUser(user.id, user.name)
        .catch(err => {this.error(err)});
    });
    return Promise.all(promises);
  }
}

每当您在 emails 和 users 数组上调用 .map 时，都会返回一个 promise 数组，该数组存储在两个函数的 const promises 中。现在您可以简单地将这些承诺传递给Promise.all 并返回从Promise.all 返回的承诺。现在，您在 mainFunc() 中的 Promise.all 调用正在接收它需要等待的承诺，并且在两个函数完成执行之前不会调用 this.reloadData()。

【讨论】：