循环获取，保持结果顺序

Question

我有一种情况需要遍历 URL 的数组并获取结果，但我需要保留请求的顺序，即第一个请求应该是 "saved" （写入文件）首先，依此类推。请求的结果是文本文件，它们的内容没有任何显示原始 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），并且由于我原始代码中的文件是文本文件，所以我无法在获取后对其进行排序。

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 和 returns 一个包含数组中所有响应的单一承诺：

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

循环获取，保持结果顺序

Fetch in loop, keep result order

javascript

promise

fetch-api