2022. 12. 14. 14:30ㆍ기본기가 부족하다면/자바스크립트
Promise의 예외처리
function promFuc() {
return new Promise((res, rej) => {
setTimeout(() => {
rej("error");
}, 1000)
})
}
위의 함수를 사용하여 예외처리 할 수 있는 방법을 알아보자.
1. catch
promFuc()
.catch(e => {
console.log("1번");
})
.catch(e => {
console.log("2번");
})
이렇게 작성할 경우, 1초있다가 1번이 실행되고, 또 1초있다가 2번이 실행될 것 같지만, 실상은 그렇지 않다. (함정주의)
왜냐하면 첫 번째 catch는 함수의 promise 를 반환받게 되는데, 그 안에 예외가 발생했기 때문에 실행될 수 있다.
그럼 두 번째 catch도 동일하게 함수의 promise 를 반환받게 될까? 그렇지 않다!
두 번째 catch는 첫 번째 catch의 리턴값을 받환받고, 그 안에 에러가 발생하지 않았기 때문에, 실행되지 않았던 것이다.
2. then
promFuc()
.then(
() => { console.log("어쩌구 저쩌구"); }, // onFulfilled
e => { console.log("1번"); } // onRejected
})
.catch(e => {
console.log("2번");
})
이번에는 then을 활용한 경우다. promise에서 then은 인자를 같는데, 그 중 첫 번째는 onFulfilled고, 두 번째는 onRejected이다. onFulfilled는 promise 가 충족(성공)됐을 때, onRejected는 promise가 거부(실패)됐을 때 호출된다.
이 경우에도 두 번째 catch 문은 실행되지 않으며, "1번" 만 호출되게 된다.
async, await 의 예외처리
async function asyncFun() {
throw new Error("async 함수에서 에러 발생!")
}
위의 함수를 사용하여 예외처리 할 수 있는 방법을 알아보자.
1. catch
const result = asyncFun().catch(e => {
console.error(e);
})
promise에서 reject를 사용한 것과는 다르게, async 함수에서는 일반함수와 동일하게 throw 로 에러를 던질 수 있다.promise와 동일하게 catch를 사용해서 error를 실행한다.
2. try...catch
async function asyncFun() {
console.log("1");
try {
await promFuc();
} catch(e) {
console.error(e);
}
console.log("2");
}
async 함수내에 try...catch 문을 사용해 catch에서 error를 실행하도록 한다.
이 결과는 1, error 객체, 2 가 출력되게 된다.
promise.catch를 쓸 때, 어떤 값은 반환하는 지, 어떤 체이닝을 가지고 있는지를 잘 이해하고 예외처리를 하는 것이 비동기 예외처리의 핵심이다.
'기본기가 부족하다면 > 자바스크립트' 카테고리의 다른 글
원시값(Primitive Type) (0) | 2022.12.15 |
---|---|
[예외처리] 던질게 받아라! (0) | 2022.12.14 |
가비지 컬렉터 (0) | 2022.12.08 |
메모리 관리 (0) | 2022.12.08 |
실행 컨텍스트 (Execution Context) (1) | 2022.12.08 |