async...await

기존 Promise와의 차이점

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('비동기 통신완료');
    }, 2000);
  });
}

function print() {
  console.log('setteld될때까지 이 코드는 기다려주나요?');
}

async function main() {
  getData().then((message) => console.log(message));
  print();
}

main();

해당 코드를 실행해보면 print함수의 실행은 getData의 promise가 resolve될 때까지 기다리지않는다.

promise는 미래의 결과를 약속해주는 역할을 한다. getData는 그 결과가 반환될때까지 기다려주지않는다. 즉, 병렬처리가 되며 이것이 비동기처리를 하는 이유이기도하다.

하지만 async...await은 다르다.

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('비동기 통신완료');
    }, 2000);
  });
}

function print() {
  console.log('setteld될때까지 이 코드는 기다려주나요?');
}

async function main() {
  const message = await getData();
  print();
}

main();

해당 코드를 실행해보면 이전과 다르게 2초동안의 딜레이이후에 print함수가 실행되는 것을 볼수 있다. 이 말은 즉, await이 setteld 상태가 될때까지 기다리는동안에는 뒤에 코드들은 중지되어있다는 것이다.

✅중요한 포인트

• async함수는 항상 promise를 리턴한다.
• await은 promise가 setteld 상태가 될 때까지 기다렸다가 resolve한 값을 반환한다.
• 기다리는 시간동안에는 밑에 코드들이 실행되지 않는다.
• await키워드를 제외한 promise처리들은 병렬적인 과정이 이루어진다.

적절하지 않은 사용

function getApple(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve("apple"), 1000);
  })
}

function getBanana(){
  return new Promise( (resolve, reject) => {
    setTimeout(() => resolve("banana"), 1000);
  })
}

이 코드를 await을 이용해서 처리한다면 2초쯤 시간이 소요될 것이다.
만일 순서가 중요한 코드라면 await을 통해 처리해도 되지만 굳이 이전코드가 처리될때까지 기다릴 필요가 없다면 await을 사용하는 것은 옳지않다.

병렬적으로 처리할 수 있는 작업을 억지로 동기적으로 처리하는 로직은 프로그램 성능저하를 유발할 수 있기 때문이다.

Promise.all 메서드

promise.all은 배열인자의 각 프로미스 비동기 함수들이 모두 resolve되야 결과를 리턴받는다.

async function getFruites(){
  console.time();
  
  // 리턴값은 각 프로미스 함수의 반환값들의 배열
  let [ a, b ] = await Promise.all([getApple(), getBanana()]); 
  console.log(`${a} and ${b}`);
  
  console.timeEnd();
}

getFruites();

참고자료