자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 비동기 처리가 기본이다.
비동기 처리는 그 결과가 언제 반환될 지 명확하게 알 수 없기 때문에 동기식으로 처리하려면 동기적인 기법들을 사용하여야한다. 대표적인 동기식 처리방식 중에는 callback, promise 등이 있다.
async와 await는 promise를 사용한 코드보다 훨씬 직관적이기 때문에, promise를 대신하여 사용한다.
async와 await 사용법
사용법은 간단하다. function 앞에 async를 붙여주고, promise 객체 앞에 await를 붙여주면 된다.
async function getApple() {
await delay();
return "apple";
}
async의 예외처리 방법
promise 객체를 사용하기 때문에 .then / .catch 를 이용해서 예외처리 하는 방법이 있다.
async function p2() {
throw 'error';
//throw new Error("error");
//await Promise.reject(new Error("error"));
//return Promise.reject(new Error("error"));
}
p2()
.then((n) => console.log(n))
.catch((n) => console.log(n));
throw로 예외처리를 할 수도 있다.
async function myAsyncErrorFun() {
throw 'myAsyncError';
}
const resultAsync = myAsyncErrorFun().catch((e) => {
console.error(e);
});
async 함수 내에서 await하는 promise의 예외가 발생하면 throw를 반환한다.
async function myAsyncFunCheckErrorNextCode() {
console.log(new Date());
await rejectedWait(1); // throw를 반환하고, 아래 구문들은 실행되지 않는다.
console.log(new Date());
}
const resultAsyncFunCheckErrorNextCode = myAsyncFunCheckErrorNextCode();
async 함수 내에서 try / catch를 사용하는 방법도 있다. (반드시 await를 통해 동기식으로 만들어 주어야 한다.)
async function myAsyncFunTryCatch1() {
console.log(new Date());
try {
await rejectedWait(1); // throw 되었다.
} catch (e) {
console.error('myAsyncFunTryCatch1', e);
}
// 그 다음일들을 쭉쭉할 수 있다.
console.log(new Date());
}
const resultAsyncFunTryCatch1 = myAsyncFunTryCatch1();
출처
'프로젝트 > 프리해요(부트캠프 프로젝트)' 카테고리의 다른 글
overflow, text-overflow, white-space (0) | 2023.07.18 |
---|---|
어떤 이미지 포맷을 써야할까? PNG vs SVG (0) | 2023.07.17 |
HTML/CSS 네이밍 시에 Wrapper와 Container 차이 (0) | 2023.07.13 |
Header와 Footer의 position 속성 (0) | 2023.07.12 |
메인페이지 완성! CSS는 어렵다.... 정말 어렵다! (0) | 2023.07.11 |
댓글