(12) Asynchronous JavaScript - catch(), finally() 메소드

// main
fetch('https://todo-api.fesp.shop/api/todolist')
    .then((response)=> response.json())
    .then((data)=> console.log(data));

    console.log('Task 2');
    console.log('Task 3');

then 메소드와 프로미스 체인(Promise Chain)을 사용할 때는

아래와 같이 catch와 finally 메소드를 사용할 수 있다.

// main
fetch('https://todo-api.fesp.shop/api/todolist')
    .then((response)=> response.json())
    .then((data)=> console.log(data))
    .catch((error)=> console.log('error'))
    .finally(()=> console.log('finished'));
    
    console.log('Task 2');
    console.log('Task 3');

catch 메소드는 프로미스 체인에서 발생하는 오류를 잡아서 콜백을 실행해주고

finally 메소드는 프로미스 체인에서 어떤 일이 발생하든 끝에 콜백을 실행해 준다.

 

실행해보면

Task 2와 Task 3이 먼저 출력되고

데이터가 출력된 다음에 마지막에 finished가 출력된다.

만약 잘못된 주소로 실행해본다면

출력되는 순서는 같지만 다음과 같이 데이터 대신 error가 출력될 것이다.

 

이런 에러 객체를 활용해서 다양한 오류 처리를 할 수 있다.

---

catch와 finally 메소드가 어떻게 동작하는지 자세히 알아보자.

 

일단 fetch 함수와 then,catch,finally 메소드는 모두 Promise를 리턴한다.

그리고 fetch 함수가 실행되는 동안

Promise 체인 아래에 있는 코드 (Task2,3)를 실행한다.

현재 위 코드에서는 fetch를할 때 잘못된 주소를 적었기 때문에 오류가 발생할 것이며

첫 번째 Promise는 Rejected 상태가 되고 결과값으로 오류를 갖게된다.

 

then 메소드는 앞선 Promise가 Fulfilled 상태가 되면 등록된 콜백을 실행한다고 했을 때,

지금은 Promise가 Rejected 상태이기 때문에 아무 콜백도 실행하지 않는다.

그리고 뒤에있는 Promise는 이전 Promise와 똑같은 상태와 결과값을 갖게된다.

 

다음 then에 연결되어있는 Promise도 Rejected 상태이기 때문에 콜백을 실행하지 않고

then이 리턴하는 Promise도 Rejected 상태가 된다.

catch 메소드는 이전 Promise가 Rejected 상태가 되면 

Promise의 결과값을 가지고 콜백을 실행하는데,

어떻게 보면 then의 반대라고 생각할 수 있다.

 

아무튼 이 콜백을 실행하고 콜백이 Promise를 리턴하면 

catch 메소드가 리턴하는 Promise도 동일한 상태와 결과값을 갖게 되고

콜백이 일반 값을 리턴하면 catch 메소드가 리턴하는 Promise는 Fulfilled 상태가 되고

리턴 값을 결과값으로 갖게된다.

 

지금은 console.log를 리턴하고 있는데

console.log는 undefined를 리턴한다고 했을 때,

그래서 Promise가 Fulfilled 상태가 되고 undefined를 결과값으로 갖게된다.

 

참고로 catch에서 오류를 이미 처리했기때문에

콜백이 잘 실행되면 catch가 리턴하는 promise는 Rejected가 아닌

Fulfilled 상태를 가지게 된다.

 

그리고 마지막으로 finally 메소드는

앞선 Promise의 결과가 결정되면,

그러니까 Fulfilled 또는 Rejected 상태가 되면 등록된 콜백을 실행한다.

 

그래서 오류가 나든 안나든 항상 이 콜백이 실행되는 것이다.

그리고 finally가 리턴한 Promise는 Fulfilled 상태가 되고

undefined를 결과값으로 갖게된다.

---

그럼 핵심 포인트를 정리해보자.

Promise 객체의 then, catch, finally 메소드를 연결해서 프로미스 체인을 만들 수 있으며

then 안에는 앞에 작업이 성공했을 때 실행할 콜백을 등록하면 되고

catch 안에는 앞서는 프로미스 체인 어딘가에서 오류가 났을 때 실행할 콜백들 등록하면 된다.

 

오류가 어디서 나든 Rejected 상태의 Promise가 게속 전파되는 원리 때문에

catch 메소드가 오류를 처리할 수 있다.

그래서 catch 메소드는 보통 then 이후에 작성한다.

 

그리고 finally는 앞선 Promise의 결과가 어떻게든 해결이 되면,

그러니까 더 이상 Pending 상태가 아니면 안에 있는 콜백을 실행한다.

 

프로미스 체인의 결과와 상관없이

항상 실행돼야 하는 코드가 있다면 finally에 등록하면 된다.

 

프로미스 체인 어디에서든 결과를 기다리는 도중에는

이후에 있는 코드를 실행하고

결과가 나오면 다시 체인으로 돌아오기 때문에

코드를 비동기적으로 처리할 수 있다.