async와 await

async와 await은 Promise 객체를 더욱 쉽게 작성할 수 있고, 직관적으로 코드를 해석할 수 있는 문법이다.

Promise 객체

 

먼저, 프로미스 객체를 사용해 간단한 비동기 처리 함수를 작성해보자.

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = () => {
  delay(2000).then(() => {
    console.log('대기');
  });
};

start();

코드 설명

1. delay함수는 setTimeout함수에서 사용될 지연 시간을 매개변수로 받는다.
2. Promise 객체를 반환한다.
3. 지정된 시간 후 resolve함수를 호출한다.
4. start함수를 이용해 delay함수를 호출한다.
5. start함수는 delay함수의 인수로 2000을 넘겨 2초동안 지연시키고, then 메서드를 사용해 '대기'라는 단어를 출력한다.

이제, 위 코드를 async/await을 이용해 더 직관적으로 작성해보자.

 

async

async 키워드는 함수 선언 앞에 작성된다.

const start = async () => {
  delay(2000).then(() => {
    console.log('대기');
  });
};

async키워드가 붙은 함수는 자동으로 Promise 객체를 반환하는 비동기 처리 함수가 된다.

실제로 async키워드가 붙은 start함수를 출력해보면 Promise {<pending>}, 즉 state가 pending인 Promise가 출력되는 것을 볼 수 있다.

따라서 async 함수는 then 메서드를 사용할 수 있다

const start = async () => {
  return '대기';
};

start().then((res) => {
  console.log(res);  // '대기' 출력
});

코드를 실행해보면 '대기'가 출력되는데, 이는 start함수의 반환 값과 start함수가 반환하는 프로미스 객체의 resolve값이 동일하기 때문이다.

 

await

await키워드는 특정 함수의 앞에 작성되며, then키워드를 대신하여 사용할 수 있다.

const start = async () => {
  await delay(2000);
  console.log('대기');
};

start();

await의 특징

• async함수 내부에서만 사용 가능
• 해당 Promise가 처리될 때까지 기다린 다음 결과값을 받음
• await이 작성된 코드가 종료되기 전에는 그 아래 코드들이 실행되지 않음

await 없이 실행:

const start = async () => {
  delay(2000);  // await 없음
  console.log('대기');
};

start();  // '대기'가 즉시 출력

 

 

await과 함께 실행:

const start = async () => {
  await delay(2000);  // await 있음
  console.log('대기');
};

start();  // 2초 후 '대기' 출력

이렇게 async와 await으로 비동기 함수를 처리하면 프로미스 객체를 편리하고 가독성있게 사용할 수 있고, 비동기 함수의 실행 순서를 예측할 수 있다.

 

에러 핸들링

async와 await을 이용한 비동기 처리 함수에서는 try-catch문법을 이용해 예외처리를 할 수 있다.

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = async () => {
  try {
    await delay(2000);
    console.log('대기');
  } catch (error) {
    console.log(error);
  }
};

start();

동작 방식

1. try블록 안의 코드가 실행된다.
2. 에러가 발생하면 catch 블록의 코드가 실행된다.
3. 발견된 에러는 error 객체에 담겨 전달된다.
4. 이를 이용해 어떤 에러가 발생했는지 확인하고 처리할 수 있다.

에러 처리 예시:

const delay = (ms) => {
  return new Promise((resolve, reject) => {
    if (ms < 0) {
      reject('시간은 0보다 커야 합니다');
    }
    setTimeout(() => {
      resolve();
    }, ms);
  });
};

const start = async () => {
  try {
    await delay(-1000);  // 에러 발생
    console.log('대기');
  } catch (error) {
    console.log(`에러 발생: ${error}`);  // '에러 발생: 시간은 0보다 커야 합니다' 출력
  }
};

start();