[JS] 자바스크립트 비동기 예외처리(Promise, async, await)

지난 포스팅에서 자바스크립트 예외처리를 다뤘다.
그러나 비동기 상황에서의 예외처리는 조금 다르다. 하나씩 살펴보자.

Promise

다음과 같이 Promise를 리턴하는 비동기 함수가 존재한다.

const sleep = function(sec){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('Error 발생')
        }, 1000 * sec)
    })
}

sleep(3);

실행시켜봤을 때, catch되지 않은 에러가 있다고 나온다.
그럼 sleep의 사용을 try-catch 문으로 감싸보자.

try {
  sleep(3);
} catch (e) {
  console.log(e);
}

결과는 똑같다. 그 이유는 뭘까?

비동기작업은 함수가 실행 될 때, 바로 콜스택에 들어가는 것이 아니다.
자세한 내용은 이 포스팅을 참고하자.
([JS] 자바스크립트의 비동기 처리, 이벤트 루프)

따라서, 예외가 발생하는 시점과 try-catch 문이 감싸고 있는 시점이 일치하지 않아 예외를 잡아주는게 불가능하다.
즉, sleep함수가 호출되고 백그라운드에서 돌아가고 있을 때 이미 try-catch 문의 역할은 끝나버린 것이다.

그렇다면 Promise에서의 예외처리는 어떻게 해야할까?
두 가지의 방법이 있다.

1. 리턴된 Promise의 .then() 이용
   (then의 두번 째 인자로 예외처리 함수를 추가할 수 있다.)

   sleep(3).then(
   (result) => {
   //Reslolve 되었을 때의 처리
   console.log(result);
     },
     (e) => {
   //Reject 되었을 때의 처리
   console.log(e);
     }
   );

2. 리턴된 Promise의 .catch() 이용

   sleep(3).catch((e) => {
         console.log(e);
   });

위와 같이 코드를 작성하였을 때는 Uncaught메세지가 뜨지 않는다.

async / await

async함수 역시 Promise를 리턴한다는 것을 안다면 비슷하게 예외처리를 할 수 있다.
([JS] 자바스크립트 Promise, async, await)

async function myFunction(){
    throw 'Error!';
}

myFunction().catch(e => console.log(e));

만약 async와 await을 함께 쓴다면 try-catch 문으로도 잡아줄 수 있다.

const sleep = function (sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error 발생");
    }, 1000 * sec);
  });
};

const myFunction = async function () {
  try {
    const result = await sleep(3);
  } catch (e) {
    console.log(e);
  }
};

myFunction();

await으로 인해 try-catch 문의 시점과 에러가 발생하는 시점이 일치하기 때문이다.
이렇게 자바스크립트에서의 예외처리를 알아보았다.조금 더 자세한 내용은 이곳을 참고하자.