catch 메소드 이해하기

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

 

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

 

코드를 아래와 같이 수정해보자.

 

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 라고 하자.

 

일단 fetch 함수의 작업이 실패해서 Promise-A 객체가 rejected 상태가 되면, 첫번째  then 메소드의 두번째 콜백이 실행이 되어야 한다. 하지만 지금 첫번째 then 메소드에는 두번째 콜백이 없기 때문에 아무 콜백도 실행되지  않는다. 이런 경우에는 Promise-B 객체가 Promise-A와 똑같은 rejected 상태가 되고, 동일한 작업 실패 정보를 갖게 된다.

 

그럼 이제 rejected 상태가 된 Promise-B에 붙은 then 메소드에는 두번째 콜백이 있기 때문에 이 두번째 콜백이 실행된다. 결국 catch 메소드도 then 메소드의 실행 원리를 정확히 알아야 잘 해석할 수 있다.