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

我一直在试图找出为这个函数编写承诺的正确方法。我有一个异步函数，它向服务器发出HTTP请求以检索响应“documents\u fileUploader”。我正在映射响应中每个项目的“url”，每个url将进入一个函数，该函数发出另一个HTTP请求，然后设置状态。我只想在“documents\u 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);
  })
}

• 对于您的主要问题，您可以使用该方法等待

  .map

  调用返回的每个承诺
• 其次，为了使其工作，您的

  getFileObject

  函数必须返回它创建的承诺

因此，结合这两个更改，您的代码段可能如下所示：

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);
  })
}

• 对于您的主要问题，您可以使用该方法等待

  .map

  调用返回的每个承诺
• 其次，为了使其工作，您的

  getFileObject

  函数必须返回它创建的承诺

因此，结合这两个更改，您的代码段可能如下所示：

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);
  })
}

---

这对我所需要的工作非常有效！非常感谢。这对我所需要的工作非常有效！非常感谢。