비동기 처리를 위한 하나의 패턴

1. 프로미스의 생성

const promise = new Promise((resolve, reject) => {
  if (/* 비동기 처리 성공*/) {
      resolve('result') 
  } else {
    reject('error')
  }

예시 : GET 구현

const promiseGet = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject(new Error(xhr.status));
      }
    };
  });
};

2. 프로미스의 후속 처리

프로미스가 pending에서 fulfiled 상태 또는 rejected 가 되면 프로미스의 처리 결과(에러)를 가지고 후속처리를 해야한다.

2.1 promise.prototype.then

then 메서드는 두개의 콜백함수를 인수로 받아 항상 프로미스를 반환한다.
첫번째 인수: fulfiled 상태가 되면 호출되고 프로미스의 처리결과를 인수로 전달받는다.
두번쨰 인수: rejected 상태가 되면 호출되고 프로미스의 에러를 인수로 전달 받는다.

new Promise((reslove, reject) => reslove("fulfiled")).then(
  (value) => console.log(value),
  (error) => console.errer(error)
); // fulfiled

new Promise((resolve, reject) => reject("rejected")).then(
  (value) => console.log(value),
  (error) => console.errer(error)
); // Error: rejected

2.2 promise.prototype.catch

catch 메서드는 프로미스가 rejected 상태인 경우만 호출된다. 이 메서드 역시 항상 프로미스를 반환한다.

new Promise((resolve, reject) => reject("rejected")).catch(
  (value) => console.log(value),
  (error) => console.errer(error)
); // Error: rejected

2.3 promise.prototype.finally

finally 메서드는 프로미스의 상태(fulfiled, rejected)에 상관없이 무조건 한 번 호출된다.
이 메서드 역시 항상 프로미스를 반환한다.

new Promise(() => {})
  .finally(() => console.log("finally")); // finally