Question

我正在处理一些涉及承诺的异步调用（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)});
              });
          }
    }

Answer 1

如评论中所述，您的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);
  }
}

无论何时在电子邮件和用户数组上调用.map，都会返回一个promise数组，该数组存储在两个函数的const promises中。现在，您只需将这些承诺传递给Promise.all，然后返回从Promise.all返回的承诺。现在，您在Promise.all内部的mainFunc()调用正在接收承诺，它需要等待并且在两个函数执行完毕之前不会调用this.reloadData()。

Promise.all不在等待功能完成

1 个答案: