async/await

async/await

@2024.04.04

async/await은 Promise 함수보다 더 직관적이고 읽기 쉬운 코드를 작성할 수 있다.

또한 try/catch 문을 사용하여, .catch()를 사용하는 것보다 간편하고 명확하게 에러 처리가 가능하다.

이번엔 async/await 문법에 대해 알아보자.

async/await 문법

💡

ES8에 해당되는 문법으로서 Promise를 더욱 쉽게 사용할 수 있게 해준다.

async 함수

• async 키워드를 사용하여 함수를 선언할 때 해당 함수는 항상 Promise를 반환

• 비동기 코드를 포함하고 있을 때 사용

• await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있다.

• 에러를 발생시킬 때는 throw를 사용하고, 에러를 잡아낼 때는 try/catch 문을 사용한다.

await 표현식

• await 키워드를 사용하여 Promise를 기다리고, Promise가 이행될 때까지 함수의 실행을 일시 중지하며, Promise가 이행되면 해당 값을 반환한다.

• async 함수 내부에서만 사용 가능

예시

• 예시 1

  

  // Promise를 반환하는 비동기 함수
  function myAsyncFunction() {
    return new Promise(resolve => {
      setTimeout(() => resolve('Promise가 완료됨'), 1000);
    });
  }
  
  // async 함수
  async function main() {
    console.log('첫 번째 작업 시작');
    const result = await myAsyncFunction(); // Promise를 기다림
    console.log('Promise 결과:', result);
    console.log('두 번째 작업 시작');
  }
  
  main();

  • main 함수는 첫 번째 작업을 시작하고, await를 사용하여 myAsyncFunction 함수가 반환하는 Promise가 이행될 때까지 기다린다.
  • 그 후에 Promise의 결과를 출력하고 두 번째 작업을 시작합니다.

• 예시 2

  function sleep(ms) {
  	return new Promise((resolve) => setTimeout(resolve, ms));
  }
  // 해당 함수는 항상 Promise를 반환
  async function makeError() {
    await sleep(1000);
    const error = new Error();
    // 에러를 발생 시킨다.
    throw error;
  }
  // 해당 함수는 항상 Promise를 반환
  async function process() {
    try {
      await makeError();
    } catch (e) {
      console.error(e);
    }
  }
  process();

  • 실행 결과
    1. process() 함수가 호출되면 내부에서 makeError() 함수가 호출된다.
    2. makeError() 함수 내부에서는 1초 동안 대기한 후에 에러를 발생시킨다.
    3. 에러가 발생하면 makeError()함수는 실행이 중단되고, 발생한 에러 객체가 catch블록으로 전달된다.
    4. process() 함수의 catch 블록에서는 전달받은 에러를 콘솔에 출력한다.