Javascript : fetch 함수에서의 에러처리 (catch, finally 메소드)

개요 

Promise 객체가 rejected 되었을 때 실행하고 싶은 콜백은 

then 메소드의 두 번째 파라미터로 넣는다.

하지만 이 방법 말고 catch 메소드를 사용하는 방법도 존재한다.

 

// Internet Disconnected

fetch('<https://jsonplaceholder.typicode.com/users>')
  .then((response) => response.text(), (error) => { console.log(error); })
  .then((result) => { console.log(result); });

 

 

1. catch 메소드

 

1) catch 메소드란?

 

catch 메소드는 

Promise 객체가 rejected 되었을 때 실행하고 싶은 콜백을 

등록하는 메소드이다.

 

// Internet Disconnected

fetch('<https://jsonplaceholder.typicode.com/users>')
  .then((response) => response.text())
  .catch((error) => { console.log(error); })
  .then((result) => { console.log(result); });

 

어떻게 fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에 전달될 수 있을까?

지금 이 코드를 아래처럼 수정해보면

// Internet Disconnected

fetch('<https://jsonplaceholder.typicode.com/users>') // Promise-A
  .then((response) => response.text()) // Promise-B
  .then(undefined, (error) => { console.log(error); }) // Promise-C
  .then((result) => { console.log(result); }); // Promise-D

catch 메소드는 사실 then 메소드의 첫 번째 인자로 undefined을 넣은 것과 같다.

그래서 catch 메소드를 then 메소드로 변환해봤다.

 

이 코드에서 fetch 함수와 각각의 then 메소드가 리턴하는 Promise 객체를

순서대로 Promise-A, B, C, D라고 하자.

그리고 각각의 Promise의 상태가 어떻게 변하는지 살펴보자.

 

일단 fetch 함수의 작업이 실패해서 Promise-A 객체가 rejected 상태가 되면,

첫 번째 then 메소드의 두 번째 콜백이 실행되야한다.

하지만 지금 첫 번째 then 메소드에는 두 번째 콜백이 없기 때문에 아무 콜백도 실행되지 않는다.

 

이런 경우에는 

Promise-B 객체가 Promise-A와 똑같은 rejected 상태가 되고,

동일한 작업 실패 정보를 갖게 된다.

 

그럼 이제 rejected 상태가 된 Promise-B에 붙은 then 메소드에는

두 번째 콜백이 있기 때문에 이 두 번째 콜백이 실행된다.

즉, catch 메소드의 콜백이 실행되는 것이다.

 

2) catch 메소드 사용법

Promise chaining에서 

어떤 Promise 객체가 rejected 되더라도 

대응하기 위해서는 

catch 메소드는 가장 아래 부분에 쓰는 게 좋다.

 

 

2. finally 메소드 

1) finally 메소드란?

이전의 프로미스 객체가 fullfilled 상태가 되든

rejected 상태가 되든 상관없이

항상 실행하고 싶은 콜백이 있을 때 사용한다.

 

이는 catch 메소드보다도 뒤에 쓴다.

 

finally 메소드는

작업 성공 결과나 작업 실패 정보가 필요하지 않기에

딱히 파라미터가 필요없다.

 

보통 프로미스 체이닝에서

작업을 수행하기 위해 사용했던 자원을 정리하거나,

로그 기록을 남기거나,

어떠한 경우든 항상 특정 변수의 값을 변경해줘야할 때 사용한다.