1. Promise 객체

promise 객체는 크게 세 가지 중 하나의 상태를 가진다.

• pending : 작업이 진행 중임을 의미

• fulfilled : 작업이 성공적으로 완료되었음을 의미

• rejected : 작업이 실패했음을 의미
  
  

다시 fetch 함수로 돌아와서, 아래 코드를 한 번 살펴보자.

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

우선, fetch 함수가 처음으로 리턴한 promise 객체는 pending 상태일 것이다.

이후, response를 정상적으로 잘 받는다면, fulfilled 상태가 될 것이다.

반면, 네트워크가 끊겨서 request를 보내지 못하거나, 서버에 문제가 생겨서 response를 받지 못한다면, rejected 상태가 될 것이다.

이 과정들이 이해가 되지 않는다면, 해당 글을 먼저 읽고 본 글로 돌아오는 것을 추천한다.

이렇게 작업이 성공해서 promise 객체가 fulfilled 상태가 되면, promise 객체는 그 작업의 성공 결과도 함께 가지게 된다.

위 예시 코드의 경우, 서버가 보내 준 response가 작업의 성공 결과에 해당한다.

반면, 작업에 실패하여 reject 상태가 되면, 작업 실패 이유에 대한 정보를 promise 객체가 가지게 된다.

아래 예시 코드를 함께 살펴보자.

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

console.log('End');

여기서 then이 바로 promise 객체의 method로, promise 객체가 pending 상태에서 fulfilled 상태가 될 때 실행할 콜백 함수를 등록하는 method이다.

즉, fetch 함수가 request를 보내고 정상적으로 response를 받았을 때, 등록해 둔 콜백 함수가 실행되는 것이다.

참고로, 아래 코드의 response로는 response를 자바스크립트 객체로 만든 결과가 넘어온다.

  .then((response) => response.text())

2. Promise 객체가 rejected 상태일 때 실행할 콜백

아래 코드와 같이, then method의 두 번째 파라미터로 원하는 콜백을 넣어주면, promise 객체가 rejected 상태일 때, 실행할 콜백을 등록할 수 있다.

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

파라미터 response의 경우, 작업 성공 정보를 받아오지만, 파라미터 error의 경우 작업 실패 정보를 받아온다는 차이점이 있는 것이다.

다시 정리해보면, fetch 함수의 작업이 실패하면, fetch 함수가 리턴했던 promise 객체는 rejected 상태가 되고, 그 실패와 관련된 에러 객체를 작업 실패 정보로 갖게 된다. 이 경우, then method 안의 두 번째 콜백 함수의 파라미터로 해당 에러 객체가 전달되는 것이다.