Использование обещаний в React для ожидания завершения функций в функции карты JavaScript

Question

Я пытался выяснить, как правильно написать обещание для этой функции.У меня есть асинхронная функция, которая делает HTTP-запрос к серверу для получения ответа «documents_fileUploader».Я отображаю URL-адрес каждого элемента в ответе, и каждый URL-адрес входит в функцию, которая выполняет другой HTTP-запрос, а затем устанавливает состояние.Я хочу запустить функцию «upload ()» только после того, как все в функции «documents_fileUploader ()» завершено.Я попытался сделать это без обещания, и он сразу перешел к моей функции «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

• На ваш главный вопрос вы можете дождаться каждого обещания, которое возвращает ваш вызов .map, используя метод Promise.all.
• Во-вторых, для этогодля работы ваша 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);
  })
}