Promise 객체를 간단하게 알아보자

Promise객체의 등장

Promise 객체가 등장하기 전에도 setTimeout, addEventListener 메소드 같은 비동기적인 처리를 할 수 있는 방법이 있었습니다. 

 

만약 fetch함수를 이런식으로 만들었다면

fetch('https;//first.com', callback)

fetch('https://first.com', (response) => {
  // Do Something
  fetch('https://second.com', (response) => {
    // Do Something
    fetch('https;//third.com', (response) => {
      // Do Something
      fetch('https;//fourth.com', (response) => {
        // Do Something
      });
    });
  });
});

이 코드의 가독성은 현저하게 떨어지게 됩니다. 이런 현상을 콜백 지옥 또는 콜백 헬(callback hell)이라고 합니다.

 

하지만 우리가 알아본 fetch 함수는 Promise 객체를 리턴하기 때문에

fetch('https://first.com')
  .then((response) => {
    // Do Something 
    return fetch('https://second.com');
  })
  .then((response) => {
    // Do Something 
    return fetch('https://third.com');
  })
  .then((response) => { 
    // Do Something 
    return fetch('https://third.com');
  });

이런 식으로 Promise Chaining을 해서 좀 더 깔끔한 코드로 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 

이렇게 Promise 객체를 사용하면 callback hell 문제를 해결할 수 있습니다.

뿐만 아니라 이전의 방식에서는 콜백에 필요한 인자를 넣어주고 실행하면 되는 단순한 방식이었다면,

Promise 객체 문법에는 pending, fulfilled, fulfilled 상태, 작업 성공 결과 및 작업 실패 정보(이유), then, catch, finally 메소드 등과 같은 비동기 작업에 관한 보다 정교한 설계가 문법 자체에 반영되어 있다는 것을 알 수 있습니다.

 

 

 

 

 

fetch함수는 promise 객체를 반환하게 됩니다.

fetch함수가 실행되면 성공 or 실패의 결과를 promise객체에 저장하게 됩니다.

promise 객체는 작업에 관한 상태 정보(pending, fulfilled, rejected)를 가집니다.

 

then 메소드는 promise객체의 메소드이며, promise객체의 상태가 pending -> fulfilled 상태가 되었을 때 실행할 콜백을 등록하는 메소드입니다.

then 메소드는 새로운 promise객체를 반환합니다. 

 

promise(pending -> fulfilled)  → 등록된 콜백 실행 → 이 때 promise의 작업성공결과가 콜백의 파라미터(response)로 넘어감.  

 

 

Promise Chaining은 비동기 작업을 순차적으로 처리할때 코드를 깔끔하게 하기 위해서 사용합니다.

 

then메소드에서 리턴한 promise객체는 콜백이 리턴한 promise 객체(빨간박스)와 동일한 상태와 결과를 갖게 됨.

 

 콜백이 리턴한 값(빨간박스)이 promise객체 값이 아니라면 then메소드의 promise객체는 fulfilled가 되고 콜백이 리턴한 값을 결과값으로 가짐.

 

실행된 콜백이 아무 값도 리턴하지 않는 경우

자바스크립트에서는 함수가 아무것도 리턴하지 않으면 undefined를 리턴한 것으로 간주됩니다.

따라서 then 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고, 그 작업 성공 결과로 undefined를 갖게 됩니다.

 

실행된 콜백 내부에서 에러가 발생했을 때

Promise 객체가 rejected 상태가 되고, 작업 실패 정보로 해당 에러 객체를 갖게 됩니다.

 

아무런 콜백도 실행되지 않을 때

fetch('https://www.google.com') // Promise-1
  .then((response) => response.text()) // Promise-2
  .then((result) => { console.log(result) }, (error) => { alert(error) });

then 메소드의 아무런 콜백도 실행되지 않는 경우가 있습니다. 지금 인터넷을 끊고 나서 위 코드를 실행했다고 합시다.

그럼 fetch 함수가 리턴한 Promise-1 객체는 rejected 상태가 되기 때문에, 첫 번째 then 메소드의 두 번재 콜백이 실행되어야 합니다.

그런데 지금 두 번째 콜백이 없어서 아무런 콜백도 실행되지 않습니다.

이런 경우에 then 메소드가 리턴했던 Promise-2 객체는, 이전 Promise 객체와 동일한 상태와 결과를 갖게 됩니다.

Promise-2 객체는 Promise-1 객체처럼 rejected 상태가 되고, 똑같은 작업 실패 정보를 갖게 됩니다.

그럼 rejected 상태가 된 Promise-2의 then 메소드에는 이제 두 번째 콜백이 존재하기 때문에 그 두 번째 콜백이 실행됩니다.

 

 

 

 

const successCallback = function () { };
const errorCallback = function () { };

fetch('https://jsonplaceholder.typicode.com/users') // Promise-A
  .then(successCallback, errorCallback); // Promise-B

fetch 함수의 작업이 성공해서 Promise-A 객체가 fulfilled 상태가 된 경우 : then 메소드 안의 "첫 번째" 콜백인 successCallback이 실행됩니다.

fetch 함수의 작업이 실패해서 Promise-A 객체가 rejected 상태가 된 경우 : then 메소드 안의 "두 번째" 콜백인 errorCallback이 실행됩니다.