[예외처리] Promise, async & await

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