javascript - 如何使用 Promise.all 获取一组 URL？

Question

如果我有一个 url 数组:

var urls = ['1.txt', '2.txt', '3.txt']; // these text files contain "one", "two", "three", respectively.

我想构建一个如下所示的对象:

var text = ['one', 'two', 'three'];

我一直在努力学习如何使用 fetch 来实现这一点，它当然会返回 Promise。

一些我尝试过但不有效的方法:

var promises = urls.map(url => fetch(url));
var texts = [];
Promise.all(promises)
  .then(results => {
     results.forEach(result => result.text()).then(t => texts.push(t))
  })

这看起来不对，而且在任何情况下都行不通 — 我不会以数组 ['one', 'two', 'three'] 结束。

在这里使用 Promise.all 是正确的方法吗？

Answer 1

是的，Promise.all 是正确的方法，但如果您想首先获取 所有 url，然后获取所有 text<，您实际上需要它两次s 来自他们(这又是对响应主体的 promise )。所以你需要做

Promise.all(urls.map(u=>fetch(u))).then(responses =>
    Promise.all(responses.map(res => res.text()))
).then(texts => {
    …
})

您当前的代码无法正常工作，因为 forEach 不返回任何内容(既不是数组也不是 Promise)。

当然，您可以简化它，并在相应的提取 promise 完成后立即从每个响应中获取正文:

Promise.all(urls.map(url =>
    fetch(url).then(resp => resp.text())
)).then(texts => {
    …
})

或者与 await 相同:

const texts = await Promise.all(urls.map(async url => {
  const resp = await fetch(url);
  return resp.text();
}));