[JavaScript] async await

async await

async await는 promise를 조금 더 쉽고 가독성 좋게 작성하기 위해 ES8에 추가된 기능이다.

async await은 프로미스를 반환한다.

async funtion getData() {
  return 123;
}
getData().then(data => console.log(data)); // 123

async를 통해 정의된 함수는 항상 프로미스를 반환하고 따라서 함수 호출 후 then 메서드를 사용할 수 있다.

사용법

async는 비동기 처리할 함수 앞부분에 await은 함수 내부에 프로미스를 반환하는 함수 앞부분에 작성하면 된다.

function requestData(value) {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log('requestData:', value);
      resolve(value);
    }, 100)
  );
}
async function getData() {
  const data1 = await requesData(10); 1️⃣
  const data2 = await requesData(20); 1️⃣
  console.log(data1, data2); 2️⃣
  return [data1, data2];
}
getData();
// requestData: 10 
// requestData: 20 
// 10 20 

// 1️⃣ requesData 함수가 반환하는 프로미스가 처리됨 상태가 될 때까지 
// 2️⃣ 코드는 실행되지 않음

await은 async await 함수 내부에서만 사용할 수 있고 await 오른쪽 함수가 반환하는 프로미스가 처리됨 상태가 될 때까지 기다린다. 따라서 await을 통해 비동기 코드를 순차적으로 실행할 수 있다.

프로미스와 비교

// Promise
function getDataPromise() {
  asyncFunc1()
  .then(data => {
    console.log(data);
    return asyncFunc2();
  })
  .then(data => {
    console.log(data);
  });
}
// async await
async function getDataAsync() {
  const data1 = await asyncFunc1();
  console.log(data1);
  const data2 = await asyncFunc2();
  console.log(data2);

async await 함수는 then 메서드를 호출할 필요가 없기 때문에 프로미스보다 더 간결하고 가독성이 좋다.

활용법

비동기 함수 병렬처리

async function getData() {
  const [data1, data2] = await Promise.all([asyncFunc1(), asyncFunc2()]);
  // ...
}

순차적으로 실행되는 함수 사이에 의존성이 없다면 Promise.all을 통해 함수를 병렬 처리 해 코드의 실행 속도를 더 빠르게 만들 수 있다.

예외 처리

async await 함수 내부에서 발생하는 예외는 try catch 문으로 처리할 수 있다.

async function getData() {
  try {
    await doAsync(); // 1️⃣
    return doSync(); // 2️⃣
  } catch (error) {
    console.log(error);
  }
}

1️⃣ 비동기 함수와 2️⃣ 동기 함수에서 발생하는 모든 예외는 catch 문에서 처리된다.