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