자바스크립트 에러 처리 - try catch finally

 에러가 발생하지 않는 코드를 작성하는 것은 불가능하다. 발생한 에러에 대처하지 않고 방치하면 프로그램은 강제 종료된다. 이때 자바스크립트 try catch finally문으로 에어 처리를 할 수 있다. 

 

1) 에어 처리를 구현하는 2가지 방법

1. if문이나 단축평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법
2. 에러 처리 코드를 미리 등록해도고 에러가 발생하는 에러 처리 코드로 점프하는 방법

바로 2번 방법이 try catch finally 문으로 error handling이라고 한다.

 

2) 코드를 통해 살펴보기

let ex = document.querySelector('.ex');       

  async function imageShow(){
   try{
    let response = await fetch('./img/codehacking.jpg');

   if(!respnse.ok){
       throw new Error(`HTTP 에러 발생! ${response.status}`);
   } 
   let myBlob = await response.blob();
   let objectURL = URL.createObjectURL(myBlob);   
   let image = document.createElement('img');    
   image.src = objectURL;
   image.style.width="55%";
   ex.style.display = "block";
   ex.innerHTML = '';
   ex.append(image);
   } catch(e) {
       console.log(e);
   }     
 }  
}

 async await에서 try catch 구문을 사용해 에러처리를 간단하게 만들 수 있다.

 

3) 코드 풀이

•  catch() { } 블록은 e라고 부르는 에러 오브젝트를 통과시킨다. 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있다.
• 하지만 async 키워드가 함수를 Promise로 바꾸었으므로 하이브리드 접근방식을 사용해, .catch() 블럭을 .then() 호출의 마지막에 작성해 코드를 리팩토링 할 수 있다.

let ex2 = document.querySelector('.ex2'); 

async function myFetch2() {
    let response = await fetch('./img/codehacking.jpg');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.blob();
  }
  
  myFetch2().then((blob) => {
    let objectURL = URL.createObjectURL(blob);
    let image = document.createElement('img');
    image.src = objectURL;
    image.style.width="55%";
    ex2.append(image);
  }).catch(e => console.log(e));

위 리팩토리 코드는 try없이 then과 catch만으로 심플하게 코드를 구현할 수 있다는 핵심이다.

.catch() 블록이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문이다.

여기서 try/catch 블록은 사용했더라고, myFetch()에서 발생한 unhandled 에러를 잡아낼 수 있다.

리팩토리 코드 보다 기본 코드가 선호된다.

자바스크립트 이벤트 좌표 - 클릭한 곳의 좌표 보기