79

如果我有一个 url 数组：

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

我想构建一个看起来像这样的对象：

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

我一直在努力学习用 来做到这一点fetch，这当然会返回Promises。

我尝试过的一些方法不起作用：

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正确的方法吗？

4

6 回答 6

145

是的，Promise.all这是正确的方法，但是如果您想首先fetch获取所有 url，然后text从它们中获取所有 s（这也是对响应正文的承诺），您实际上需要两次。所以你需要做

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

您当前的代码不起作用，因为forEach没有返回任何内容（既不是数组也不是承诺）。

当然，您可以简化它，并在相应的 fetch 承诺履行后立即从每个响应中获取正文：

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();
}));
于 2015-07-29T21:29:57.077 回答
30

出于某种原因，Bergi 的两个例子都不适合我。它只会给我空的结果。经过一些调试后，promise 似乎会在 fetch 完成之前返回，因此结果为空。

然而，本杰明·格鲁恩鲍姆早些时候在这里有一个答案，但删除了它。他的方法确实对我有用，所以我将在这里复制粘贴它，作为一种替代方法，以防其他人在这里遇到第一个解决方案的任何问题。

var promises = urls.map(url => fetch(url).then(y => y.text()));
Promise.all(promises).then(results => {
    // do something with results.
});
于 2016-05-23T10:15:29.270 回答
13

您应该使用map而不是forEach：

Promise.all(urls.map(url => fetch(url)))
.then(resp => Promise.all( resp.map(r => r.text()) ))
.then(result => {
    // ...
});
于 2016-05-26T11:06:10.897 回答
3

建议的数组urls = ['1.txt', '2.txt', '3.txt']对我来说没有多大意义，所以我将改为使用：

urls = ['https://jsonplaceholder.typicode.com/todos/2',
        'https://jsonplaceholder.typicode.com/todos/3']

两个 URL 的 JSON：

{"userId":1,"id":2,"title":"quis ut nam facilis et officia qui",
 "completed":false}
{"userId":1,"id":3,"title":"fugiat veniam minus","completed":false}

目标是获取一个对象数组，其中每个对象都包含title 来自相应 URL 的值。

为了让它更有趣一点，我假设已经有一个名称数组，我希望 URL 结果数组（标题）与之合并：

namesonly = ['two', 'three']

所需的输出是一个对象数组：

[{"name":"two","loremipsum":"quis ut nam facilis et officia qui"},
{"name":"three","loremipsum":"fugiat veniam minus"}]

我已将属性名称更改title为loremipsum.

const namesonly = ['two', 'three'];
const urls = ['https://jsonplaceholder.typicode.com/todos/2',
  'https://jsonplaceholder.typicode.com/todos/3'];

Promise.all(urls.map(url => fetch(url)
  .then(response => response.json())
  .then(responseBody => responseBody.title)))
  .then(titles => {
    const names = namesonly.map(value => ({ name: value }));
    console.log('names: ' + JSON.stringify(names));
    const fakeLatins = titles.map(value => ({ loremipsum: value }));
    console.log('fakeLatins:\n' + JSON.stringify(fakeLatins));
    const result =
      names.map((item, i) => Object.assign({}, item, fakeLatins[i]));
    console.log('result:\n' + JSON.stringify(result));
  })
  .catch(err => {
    console.error('Failed to fetch one or more of these URLs:');
    console.log(urls);
    console.error(err);
  });
.as-console-wrapper { max-height: 100% !important; top: 0; }

参考

于 2021-05-24T11:31:32.973 回答
2

以防万一，如果您使用的是 axios。我们可以像这样实现：

const apiCall = (endpoint:string)=> axios.get( ${baseUrl}/${endpoint})

axios.all([apiCall('https://first-endpoint'),apiCall('https://second-endpoint')]).then(response => {
            response.forEach(values => values)
            }).catch(error => {})
于 2021-09-30T11:23:34.833 回答
1

这是一种干净的方法。

const requests = urls.map((url) => fetch(url)); 
const responses = await Promise.all(requests); 
const promises = responses.map((response) => response.text());
return await Promise.all(promises);
于 2021-10-08T05:59:48.220 回答