TIL20: async / await

Promise Chaining 또한 지나치게 길게 늘어지게 되면 Promise Hell에 빠질 가능성이 있습니다. 이러한 경우를 효과적으로 제어하기 위해 비동기 처리 함수를 마치 동기 처리 함수처럼 다룰 수 있도록 구현해 주는 것이 async 와 await 입니다.

// Promise Constructor
const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
        console.log(string);
        resolve();
      }, 
      Math.floor(Math.random() * 100) + 1
    );
  });
};

• 아래와 같이 Promise.all() 을 이용하여 비동기 처리를 구현할 수도 있습니다. 하지만 여전히 그 완료 순서는 고정적이지 않습니다.

// Use Promise.all()
const printAll = () => {
  const promiseA = printString("A");
  const promiseB = printString("B");
  const promiseC = printString("C");
  return Promise.all([promiseA, promiseB, promiseC]);
};
printAll(); // ?

• async 와 await를 이용하면 마치 동기 처리 함수인 것처럼 코딩하지만, 실제 결과는 비동기 처리의 결과를 얻을 수 있습니다.

// Use "async", "await"

const printAll = async () => {
  const resultA = await printString("A");
  const resultB = await printString("B");
  const resultC = await printString("C");
  return [resultA, resultB, resultC];
};
printAll(); // A, B, C

const printAll = async () => {
  const resultB = await printString("B");
  const resultA = await printString("A");
  const resultC = await printString("C");
  return [resultA, resultB, resultC];
};
printAll(); // B, A, C

코드 출처: 코드스테이츠(CodeStates)