时间戳

首页 > 解决方案 > 循环获取，保持结果顺序

javascript - 循环获取，保持结果顺序

问题描述

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

标签： javascriptpromisefetch-api

解决方案

使用 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);

推荐阅读