티스토리 뷰
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
최근에 올라온 글
최근에 달린 댓글
TAG
- 인천 구월동 맛집
- Async
- Promise
- javascript
- react-native
- 맛집
- 인천 구월동 이탈리안 맛집
- 이탈리안 레스토랑
- 파니노구스토
- await
- AsyncStorage
- 정보보안기사 #실기 #정리
- react
- redux
- redux-thunk
- Total
- Today
- Yesterday