티스토리 뷰

WEB/자바스크립트

[JS] async와 await

춘햄 2024. 1. 8. 08:22

 async와 await은 JavaScript의 비동기 프로그래밍을 위해 ES2017에 도입된 키워드이다. async 함수는 항상 Promise를 반환하며, 함수 내부에서 await 키워드를 사용하여 Promise의 결과를 동기적인 방식으로 처리할 수 있다.

 

await 키워드는 async 함수 내에서만 사용할 수 있다.

  • async 함수: 이 키워드를 사용하여 함수를 선언하면, 함수는 자동으로 Promise를 반환한다. 함수 내부에서 return 문을 사용하면, 이 값은 Promise가 이행(fulfilled)될 때의 값이 된다.
  • await 키워드: Promise가 처리될 때까지 함수 실행을 일시 정지시키고, Promise가 이행되면 결과값을 반환한다. 오류가 발생하면 예외를 발생시킨다.

// 1 + 1을 수행하는 비동기 함수
const asyncAddition = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const result = 1 + 1;
      resolve(result);
    }, 1000); // 1초 후에 실행
  });
};

// async와 await를 사용하여 비동기 작업 처리
const performCalculation = async () => {
  try {
    const sum = await asyncAddition(); // Promise가 이행될 때까지 기다림
    console.log(`결과: ${sum}`); // 결과: 2
  } catch (error) {
    console.error(`오류: ${error}`);
  } finally {
    console.log('비동기 연산이 완료되었습니다.');
  }
};

// 함수 실행
performCalculation();

 

위 코드에서 asyncAddition 함수는 1 + 1의 결과를 1초 후에 반환하는 Promise를 생성한다.

 

performCalculation 함수는 async 함수로 선언되어 있으며, await를 사용하여 asyncAddition의 결과를 기다린 후, 그 결과를 출력한다. try...catch 구문을 사용하여 비동기 작업 중 발생하는 오류를 처리한다.

 

async와 await를 사용하면 복잡한 비동기 로직을 동기적인 스타일로 작성할 수 있어 코드의 가독성이 향상된다.

 

 

끝!

반응형

'WEB > 자바스크립트' 카테고리의 다른 글

[TypeScript] TypeScript - Basic 문법  (0) 2024.02.16
[JS] Array.reduce  (0) 2024.02.09
[JS] Promise  (0) 2024.01.08
[js] 비구조화 할당  (1) 2024.01.06
[Javascript] onkeydown 속성을 이용한 예제  (0) 2021.05.14
Comments