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를 사용하면 복잡한 비동기 로직을 동기적인 스타일로 작성할 수 있어 코드의 가독성이 향상된다.
끝!
반응형