在 React 中使用 Promise 等待 JavaScript 映射函数中的函数完成

Question

我一直在试图找出为这个函数编写承诺的正确方法。我有一个异步函数，它向服务器发出 HTTP 请求以检索响应“documents_fileUploader”。我正在通过响应中每个项目的“url”进行映射，每个 url 将进入一个函数，该函数发出另一个 HTTP 请求，然后设置状态。只有在“documents_fileUploader()”函数中的所有内容都完成后，我才想触发“upload()”函数。我尝试在没有承诺的情况下这样做，它直接进入我的“upload()”函数，因为请求仍在等待中。有什么建议可以解决这个问题吗？

documents_fileUploader(formData).then(resp => {
  resp.data.items.map(url => {
    const key = url.split("/")[4];
    this.setState({
      urls: [...this.state.urls, url],
      keys: [...this.state.keys, key]
    });
    this.getFileObject(key);
  })
}).then(() => {
  this.upload();
})

getFileObject = file => {
  file_view(file).then(resp => {
    this.setState({
      mimeTypes: [...this.state.mimeTypes, resp.data.item.headers.contentType]
    })
  }).catch(err => {
    console.log(err);
  })
}

Answer 1

• 对于您的主要问题，您可以使用Promise.all 方法等待您的.map 调用返回的每个承诺。
• 其次，为了使其工作，您的 getFileObject 函数必须返回它创建的承诺。

因此结合这两个更改，您的 sn-p 可能如下所示：

documents_fileUploader(formData).then(resp => {
  return Promise.all(resp.data.items.map(url => { // Wrap in Promise.all and return it
    const key = url.split("/")[4];
    this.setState({
      urls: [...this.state.urls, url],
      keys: [...this.state.keys, key]
    });
    return this.getFileObject(key); // Make sure to return this promise as well.
  }));
}).then(() => {
   // Now this won't happen until every `getFileObject` promise has resolved...
  this.upload();
})

getFileObject = file => {
  return file_view(file).then(resp => { // And return the promise here.
    this.setState({
      mimeTypes: [...this.state.mimeTypes, resp.data.item.headers.contentType]
    })
  }).catch(err => {
    console.log(err);
  })
}