循环获取,保持结果顺序

时间:2020-03-12 16:21:31

标签: javascript promise fetch-api

我遇到一种情况,我需要遍历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),并且由于我原始代码中的文件是文本文件,因此提取后无法对其进行排序。

2 个答案:

答案 0 :(得分:5)

使用承诺解析的值。无需保留单独的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);

答案 1 :(得分:2)

此外,您可以通过以下方式调用此方法:创建一个URL数组,然后调用Promise.all,该URL映射到这些URL并返回单个诺言,并在数组中包含所有响应:

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