예외처리 try catch

실무

에러가 날때 프론트상 UI에 보여줘야하는데 try catch를 사용해도되지만 fetch의 경우에는 제공해주는 .catch()를 사용하는게 더 깔끔해보임

const option = {
	headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    }
}
fetch('...', option)
.then(...)
.then(data => {
	//방법1
	try{
    	...
    catch(err){
    	//err ui
    	console.log(err)
    }
})
//.catch(err => {
	//방법2
	//err ui
    //console.log(err)
    //cosole.log(err.message)
//})

error.message를 활용할 수있음

에러처리의 필요성

에러가 발생하지않는 코드를 작성하는것은 불가능하므로 항상 에러처리를 염두해둬야한다.

 

에러발생시키기(throw)

throw를 통해 에러를 임의로 발생시킬 수 있다.

예외처리 try catch가 없을경우 에러를 뱉은후 프로그램이 강제 종료된다.

try catch로 감쌀경우 에러를 catch해서 console.log를 실행시키고 계속 이어나간다.

단, f2함수에서 에러가발생한 이후는 작동하지않는다.

 

throw는 보통 문자열보다는 객체를 쓰는데 그이유는 어디서 에러가 났는지 알려주기때문이다.

throw New Error('error')

어떤함수 몇번째에서 에러가 발생했는지(파일경로) 알려줌

 

비동기 상황에서의 예외처리(promise)

function wait(sec){
	return new Promise((resolve, reject) =>{
    	setTimeout(()=>{
        	reject('error!')
        }, sec * 1000)
    })
}

wait(3)
.then(() => {
	console.log('hi')
})
.catch(console.log)

//..프로그램이 종료되지않고 그다음줄실행

hi가 실행되지않고 error를 뱉음

 

비동기 상황에서의 예외처리(async await)

알고있겠지만! async의 결과는 promise객체의 인스턴스와 동일하다.

async의 결과나 promise의 결과값이 같다.

 

변수 result에 담을때 주의(resolve의 경우에는 done이 찍히지만 reject의 경우에는 undefined찍힘)

 

비동기함수 예외처리하는방법

일반적인 함수는 try catch로 감싸도되지만 setTimeoutdlsk 프로미스 후속 처리 메서드의 콜백함수등의 비동기함수의 경우 감싸지말고 프로미스를 리턴하기때문에 .catch(console.log)로 해야함

myAsyncFun().catch(console.log)

 

dom을 예외처리하는방법

dom = document.querySelector('.test')
dom?.classList.add('add')

if문으로 querySelector메서드의 반환값을 확인하거나 옵셔널체이닝 연산자 ?.을 사용해야 에러발생후 프로그램이 강제종료되지않는다.