循环异步调用 for 循环并在 for 循环后控制台数据

时间:2021-03-11 19:40:23

标签: javascript asynchronous ecmascript-6 async-await

data 以空白数组 [] 的形式出现,而我希望数据像一个对象数组。如果我尝试了 setTimeout(() => {console.log(data)}, 1000),那么它可以正确地控制数据,但我不想使用 setTimeout() 以同步方式控制数据。

let data = []; 

for(let i=1; i<11; i++) {
  const url = `https://jsonplaceholder.typicode.com/todos/` + i;
  
  (async () => {
    let response = await fetch(url);
    let resJson = await response.json();
    data.push(resJson);
  })();
}

console.log(data);

/*
 * Working but don't want to use this 
setTimeout(() => {console.log(data)}, 1000);
*/

1 个答案:

答案 0 :(得分:1)

代码的 console.log(data) 部分不会等待 async 块被解析,而是会同步执行。相反,您可以先将请求推送到一个数组,然后使用 Promise.all 解析它们,然后在 IIFE 内完成所有这些操作。

(async() => {
  let requests = [];

  for (let i = 1; i < 11; i++) {
    requests.push(fetch(`https://jsonplaceholder.typicode.com/todos/${i}`));
  }

  const responses = await Promise.all(requests)
  const data = await Promise.all(responses.map(res => res.json()))
  console.log(data)
})();