循环获取，保持结果顺序

Question

我有一种情况，我需要遍历一个 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之后无法排序。

Answer 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);

Answer 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)
}());