循环获取，保持结果顺序

Posted 2023-02-27

【中文标题】循环获取，保持结果顺序

【英文标题】：Fetch in loop, keep result order

【发布时间】：2020-06-24 17:47:10

【问题描述】：

我有一种情况，我需要遍历一个 URL 数组并获取结果，但我需要保留请求的顺序，即第一个请求应该首先“保存”（写入文件），等等。请求的结果是文本文件，它们的内容没有任何显示原始 URL 或顺序的数据。

我在下面做了一个演示，它获取虚拟 JSON 数据。

let promises = [];
let data = [];
let i = 1;

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');

const fn = async() => 
  while (i < 5) 
    promises.push(
      fetch('https://reqres.in/api/users/' + i, 
        mode: 'cors',
        headers: headers
      )
      .then(response => response.json())
      .then(json => 
        data.push(json)
      )
    )
    i++;
  

  await Promise.all(promises).then(() => 
    console.log(data);
  )


fn();

如果你测试上面的代码，你可以看到结果是随机排序的（基于id），而且由于我的原始代码中的文件是文本文件，所以我在fetch之后无法排序。

【问题讨论】：

你应该将结果推送到Promise.all()代码中的data。

谢谢@Barmar 知道了。

【参考方案1】：

使用 promise 解析的值。无需保留单独的 data 数组并手动将值添加到其中。 Promise.all 确保值与承诺的顺序相同。

let promises = [];
let i = 1;

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');

const fn = async() => 
  while (i < 5) 
    promises.push(
      fetch('https://reqres.in/api/users/' + i, 
        mode: 'cors',
        headers: headers
      )
      .then(response => response.json())
    )
    i++;
  

  await Promise.all(promises).then(data => 
    console.log(data);
  )


fn();

而且由于您处于异步函数中，因此您可以这样做：

var data = await Promise.all(promises);
console.log(data);

【讨论】：

该死，我已经坚持了好几个小时了，不敢相信我没有这样做，谢谢。

【参考方案2】：

此外，您可以通过创建一个 url 数组然后调用 Promise.all 来调用这种方式，它会映射这些 url 并返回一个包含数组中所有响应的单个 promise：

let headers = new Headers('Content-Type':'application/json','Accept':'application/json');
let params =  mode: 'cors', headers;

(async function()   
  // Create an array or urls
  const urls = [...Array(4).keys()].map(i => `https://reqres.in/api/users/$i+1`);
  const response = await Promise.all(urls.map(url => fetch(url, params)))
  const data = await Promise.all(response.map(res => res.json()))
  console.log(data)
());

【讨论】：

谢谢，这真的很棒，因为我的数据已经在数组中了

也可以一行创建url数组，几行就可以实现完整的逻辑。

谢谢，我猜越短越好。