Promises 解决的不清楚的问题

Question

我正在实现一个选择和下载多个文档的功能。

首先，我构建了一个对象数组，其中包含每个选定文档的名称和指向其位置的链接。

    getAllSelectedUrls = () => {
      const { selectedFiles } = this.state;

      const urls = [];
      selectedFiles.forEach((file) => {
        this.returnFileUrl(file.id).then(res => res.json()).then((data) => {
          urls.push({ fileName: file.name, url: data.content_path });
        });
      });
      return urls;
    }

returnFileUrl()是一个异步API调用，通过ID获取文件的链接：

returnFileUrl = async (fileId) => {
      try {
        const resp = await fetch(`/file?fileId=${fileId}`);
        return resp;
      } catch (err) {
        console.log(err);
      }
    }

我认为通过在.then 方法中更新urls 数组，我会确保每个url 在它返回时都会得到解决。

当我调用getAllSelectedUrls() 时，我可以在控制台中记录阵列并填充所有数据。但是，我无法遍历它或通过索引访问任何对象，大概是因为此时数据尚未解析。

Answer 1

使用 Promise.all()

getAllSelectedUrls = () => {
      const { selectedFiles } = this.state;
      return Promise.all(selectedFiles.map(file => {
        return this.returnFileUrl(file.id)
               .then(res => res.json())
               .then(data => ({ fileName: file.name, url: data.content_path }))
      }))
      .then(urls => {

       //do whatever you need to do with the urls array

      })
      .catch(e => console.log(e))
    }

Answer 2

同意@Bergi，return 不会等到异步调用完成。它立即返回一个空数组。 但是，如果 urls 数组已完全填充，您可以检查每个解析。如果是这样 - 将变量存储在某处，例如使用setState。

或者只是将 urls 数组移动到状态中，每次解析只需将 url 推送到状态。

selectedFiles.forEach((file) => {
   this.returnFileUrl(file.id).then(res => res.json()).then((data) => {
      urls.push({ fileName: file.name, url: data.content_path });

      if (urls.length === selectedFiles.length) {
         this.setState({ urls });
      }
   });
});

Answer 3

试试这个：

（已编辑）

    getAllSelectedUrls = async () => {
      const { selectedFiles } = this.state;

      const urls = [];

      for (let i = 0; i < selectedFiles.length; i++) {
          const file = selectedFiles[i];
          res = await this.returnFileUrl(file.id);
          data = await res.json();
          urls.push({ fileName: file.name, url: data.content_path });
      }

      return urls;
    }

这样，在所有的promise都被解析并且url被推送后，函数会返回