(9) Asynchronous JavaScript - try catch로 비동기 오류 처리

▶asyncFunction.js, main.js 파일

// asyncFunction.js
export async function printList () {
  const response = await fetch('https://todo-api.fesp.shop/api/todolist');
  const data = await response.json()
  console.log(data);
}

// main.js
import {printList} from './asyncFunction.js';

printList()

---

이전 글 들을 포함해서 여태 비동기 작업이 항상 오류 없이 잘 실행된다고 가정하고 코드를 구성하였는데

만약 비동기 작업이 실패할 경우가 생기는 경우

그러니까 예를들면 다음과 같은 상황이 생길 때,

• fetch는 네트워크가 불안정
• 서버 측 오류
• 잘못된 URL에 리퀘스트 보냄

등등 다양한 이유로 리퀘스트가 실패할 수 있다.

이런 상황을 대비해서 적절히 오류 처리를 해줘야하는데

Promise를 활용하는 비동기 작업에서 오류가 났을 때 처리 하는 방법이 있다.

비동기 오류 처리 - try catch

printList 함수에서 코드가 끝까지 실행됐다는 것을 쉽게 알아 볼 수 있게 

다음과 같이 'Finished' 문자열을 추가해주었다.

// asyncFunction.js
export async function printList () {
  const response = await fetch('https://todo-api.fesp.shop/api/todolist');
  const data = await response.json()
  console.log(data);
  console.log('Finished');
  
}

 

그리고 main.js 에서는 printList 함수를 import 하고 있을 때 코드를 실행하면

데이터들과 그 아래에 'Finished'가 출력되는 것을 확인할 수 있다.

 

그리고 그 밑에 [Done] exited with code=0 in... 이라고 나와있는데

프로그램이 정상적으로 실행되면 code=0 으로 종료된다.

 

그렇다면 일부러 오류를 발생시키기 위해 잘못된 주소를 입력해보면

다음과 같이 오류 내용과 함께 code=1로 종료된다.

// asyncFunction.js
export async function printList () {
  const response = await fetch('https://todo-api.fesp.shopppppppp/api/todolist');
  const data = await response.json()
  console.log(data);
  console.log('Finished');
  
}

 

위와 같이 Promise 기반 코드에서 오류가 나는 것을 처리하려면

try catch문을 사용하면 된다.

[try catch문 복습하기 - Link]

 

try catch문은 어떤 오류가 발생했을 때

그 오류를 catch 즉, 잡아서 

프로그램이 계속 실행될 수 있게 해 주는 문법이다.

// asyncFunction.js
export async function printList () {
  try{
    const response = await fetch('https://todo-api.fesp.shopppppppp/api/todolist');
    const data = await response.json()
    console.log(data);
  } catch (error) {
    console.log('에러가 발생했습니다.');
  }
  console.log('Finished');
}

코드의 흐름을 살펴보면

try 블록 안에 있는 코드를 한 줄씩 실행하는데

오류가 나지 않으면 마지막 줄까지 실행하고

try catch문 바깥으로 나와서 콘솔 'Finished' 를 실행한다.

 

하지만 만약 try 블록 안에 있는 코드에 오류가 발생하면

오류가 나는 시점에서 바로 catch문 안으로 이동해서

'에러가 발생했습니다' 문자열을 출력한다. 

그리고 try catch문 바깥으로 나와서

마지막 'Finished'를 출력한다.

 

main 출력 결과를 보면 에러 메시지와 Finished가 출력 되는 것을 확인할 수 있으며

code=0 으로 종료되어 정상적으로 실행되었다는 것을 다시한번 확인할 수 있다.

---

또한 catch문 안에서는 에러 객체를 이용해서 더 세밀한 오류 처리를 할 수도 있다.

// asyncFunction.js
export async function printList () {
  try{
    const response = await fetch('https://todo-api.fesp.shopppppppp/api/todolist');
    const data = await response.json()
    console.log(data);
  } catch (error) {
    // console.log('에러가 발생했습니다.');
    console.log(error);
    
  }
  console.log('Finished');
}

에러 문구를 에러 객체로 출력하면 다음과 같이 발생한 오류에 따라 출력된다.

---

finally

try catch는 finally문도 같이 사용하는 경우가 있다.

[finally 문 복습하기 -Link]

 

finally문은 try catch 결과가 어떻든 항상 끝에 실행되는데

예를들어 다음과 같이 catch 블록 안에서 return을 쓰면

return의 특징에 따라, 오류가 발생했을 경우 console.log('Finished')는 실행되지 않을 것이다.

 

하지만 다음과 같이 finally 블록을 만들고 

console.log('Finished') 코드를 옮겨주면

try나 catch문에서 어떤 코드가 실행되든 finally 블록 내의 코드가 실행된다.

// asyncFunction.js
export async function printList () {
  try{
    const response = await fetch('https://todo-api.fesp.shopppppppp/api/todolist');
    const data = await response.json()
    console.log(data);
  } catch (error) {
    console.log('에러가 발생했습니다.');
    // console.log(error);
    return;
  } finally {
    console.log('Finished');
  }
}

다시 실행해보면 이번엔 'Finished' 까지 잘 출력 되는 것을 확인할 수 있다.

 

물론 try문에 있는 코드가 정상적으로 실행하게 되면 

catch문은 건너 뛰고 finally문 안에 있는 코드도 잘 실행 될 것이다.

 

try catch문과 상관없이 

끝에 무조건 실행해야 하는 코드가 있다면 finally를 활용하는 것이 좋다.