"No await in loop"

이동규 (Justin)·2021년 6월 26일
0
post-thumbnail

Code

async function a () {
  await Promise.all([1, 2, 3].reduce((result, el) => {
    result.push(setTimeout(() => { console.log(el) }, 1000));
    return result;
  }, []));
}

async function b () {
  const a = [1, 2, 3];
  
  for (let i = 0; i < a.length; i++) {
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(a[i]);
        resolve();
      }, 1000);
    });
  }
}

Description

첫번째 코드블럭의 함수 a 는 비동기 시행인 setTimeout을 모두 한꺼번에 트리거 시킨 후 비동기적으로 받아온 결과들이 모두 모였을 때 이 결과들을 순서대로 반환하지만,

두번째 코드블럭의 함수 b 는 await로 각각의 비동기 시행들을 동기적으로 blocking 한다. 즉, 1을 로그 한 뒤 1초 후 2가 로그되고, 또 다시 1초 후 3이 순차적으로 로그 된다.

profile
Frontend Developer, JamStack, Ethereum

0개의 댓글