오류 처리하기 (try catch)

fetch는

1. 네트워크가 불안정하거나
2. 서버 측에서 오류가 나거나
3. 잘못된 URL에 리퀘스트를 보내거나 

하는 등의 다양한 이유로 리퀘스트가 실패할 수 있다. 이런 상황을 대비해서 적절히 오류 처리를 해주는 것이 좋다.

promise를 활용하는 비동기 작업 중 오류가 났을 때 어떻게 처리해야 할까?

//asyncFunctions.js
export async function printEmployees() {
  const response = await fetch('https://learn.codeit.kr/api/employees');
  const data = await response.json();
  console.log(data);
  console.log('Finished');
};

//main.js
import { printEmployees } from './asyncFunctions.js';

printEmployees();

코드를 실행해보면 직원 데이터와 마지막에 Finished라고 출력된다. 프로그램이 정상적으로 실행되면 code = 0 으로 종료된다.

오류를 내기 위해서 일부러 잘못된 URL 주소를 입력해보고 오류처리를 해보자.

//asyncFunctions.js
export async function printEmployees() {
  const response = await fetch('https://learn.codeit.krㄱㄱㄱㄱ/api/employees');
  const data = await response.json();
  console.log(data);
  console.log('Finished');
};

이번엔 오류가 나고 finished가 출력되지 않았다. 그리고 code = 1로 종료된 것을 확인할 수 있다. promise 기반 코드에서 오류가 나는걸 처리하려면 trycatch문을 사용하면 된다.

try catch문은 어떤 오류가 발생했을 때 그걸 catch 해서 프로그램이 계속 실핼될 수 있게 해주는 문법이다. (이전 포스팅에서도 사용한 적 있다.)

//asyncFunctions.js
export async function printEmployees() {
  try {
    const response = await fetch('https://learn.codeit.krㄱㄱㄱㄱ/api/employees');
    const data = await response.json();
    console.log(data); 
  } catch (error) {
    console.log('Error!');
  }
  console.log('Finished');
};

코드의 흐름에 대해서 살펴보면 일단 try 블록 안에 있는 코드를 한줄 씩 실행한다. 오류가 나지 않으면 마지막 줄까지 실행하고 try catch문 바깥으로 나와서 console.log('Finished')를 실행한다. 하지만 만약 try 블록 안에서 오류가 나면 오류가 나는 시점에 바로 catch문 안으로 이동해서 'Error!' 라는 문자열을 출력하고 try catch 문 밖으로 나와 console.log('Finished')를 실행한다.

그래서 실행해보면 에러도 출력되고 Finished도 출력된다. 그리고 code = 0 으로 종료됐다.

catch 문 안에서는 에러 객체를 이용해서 더 세밀한 오류 처리를 할 수도 있는데 catch문 안에 console.log('Error!')을 console.log(error)로 바꿔 발생한 오류에 따라 다른 객체가 전달되도록 할 수도 있다.

출력 결과가 조금 복잡하긴 하다.

---

try catch는 finally 문도 같이 사용하는 경우가 많은데 finally문은 try catch결과가 어떻든 항상 끝에 실행된다. 

//asyncFunctions.js
export async function printEmployees() {
  try {
    const response = await fetch('https://learn.codeit.krㄱㄱㄱㄱ/api/employees');
    const data = await response.json();
    console.log(data); 
  } catch (error) {
    console.log('Error!');
    return; //여기에 return을 작성해주었다.
  }
  console.log('Finished');
};

catch문 안에 return을 쓰면 오류가 발생했을 경우 아래에 console.log('Finished')는 실행되지 않을 것이다. 

실행해보면 Error만 출력된다. 하지만 finally 블록을 만들고 console.log('Finished')를 그 안으로 옮겨주면 try나 catch문에서 어떤 코드가 실행되던 finally 안의 코드가 실행된다.

//asyncFunctions.js
export async function printEmployees() {
  try {
    const response = await fetch('https://learn.codeit.krㄱㄱㄱㄱ/api/employees');
    const data = await response.json();
    console.log(data); 
  } catch (error) {
    console.log('Error!');
    return; //여기에 return을 작성해주었다.
  } finally {
    console.log('Finished');
  }
};

실행해보면 Finished까지 출력된다. 

//asyncFunctions.js
export async function printEmployees() {
  try {
    const response = await fetch('https://learn.codeit.kr/api/employees');
    const data = await response.json();
    console.log(data); 
  } catch (error) {
    console.log('Error!');
    return; //여기에 return을 작성해주었다.
  } finally {
    console.log('Finished');
  }
};

그리고 물론 이렇게 try문 안에 있는 코드가 정상적으로 실행되도 finally 안에 있는 코드는 실행된다.

try catch문과 상관없이 끝에 무조건 실행해야 하는 코드가 있다면 finally를 활용하면 된다!