20230223 TIL

문제점

오늘 배우게된 promise는 비동기 작업이 성공했을 때와 실패했을 때의 두가지 상황에서 어떻게 동작하게 할지를 정해줄 수 있었다. 하지만 아직 에러핸들링을 해본 적이 없어서인지 코드가 확 와닿지 않았다. 저번에 미니 팀프로젝트에서 다른 팀원분이 에러 핸들링할 때 try..catch문을 사용하는 걸 본것 같기는 한데... 확인해봐야 할 것 같다!

해결방안

자바스크립트에서의 에러 핸들링에 쓰이는 문법인 try...catch 문법을 공부해보았다!!! 이 문법을 공부하고 나중에 promise를 적용해보면 더 확실하게 이해할 수 있을 것 같다.

---

try ... catch

try ... catch 는 먼저 try안에 있는 코드가 실행되고 에러가 있다면 코드가 중단되면서 catch 블록으로 제어흐름이 넘어간다. 이때 변수 err에는 어떤 일이 일어났는지에 대한 설명이 담긴 에러객체가 들어간다.

try{
               //실행할 코드
}catch(err){
               //에러핸들링
}

try 블록 안에서 에러가 발생해도 프로그램이 즉시 종료되지 않고 catch 블록에서 에러를 핸들링할 수 있다. try...catch 는 오직 런타임 에러에만 동작한다. try...catch 문법은 동기적으로 작동하기 때문에 비동기 코드와 사용할 때 꼭 작동시키는 함수 내부에 try..catch문을 구현해야 한다.

catch에서 얻는 에러 정보는 총 세가지가 있으며 name(에러 이름), message(에러의 상세 내용), stack(현재 호출 스택)이 있다.  아래의 경우 각각의 정보를 얻을 수 있는 방법이다.

try {
	ryuhyunju; // 에러, 변수가 정의되지 않음!
} catch(err) {
    console.log(err.name); 
    console.log(err.message); 
    console.log(err.stack); 
}

알게된 점

async 함수와 await를 사용하면 promise에 .then과 .catch를 사용하지 않고 try...catch 문법을 사용해서 에러를 핸들링 할 수 있다. 문법의 제약때문에 async 함수 밖에서 처리해야 할 경우에는 .then 과 .caych를 사용하면 된다.

async function errorfunc() {
    try {
        await new Promise (resolve => setTimeout(resolve,3000));
        return console.log('성공')
    } catch(err) {
        console.log(err+'에러를 발견했습니다');
    }
}
errorfunc();

아래처럼 promise 안에 try...catch 문을 사용해서 에러가 없는 경우와 있는 경우를 만들어 줄 수 있다. 

const promise = new Promise((resolve,reject) => {
    setTimeout(() => {
        try{
            resolve('ryu');
        }catch(err){
            reject(new Error(err.name +'에러를 발견했습니다')) 
        }
    },2000)
})

promise
.then(console.log)
.catch(console.log)