프로미스

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리르 한번에 처리하는 데도 한계가 있다.

const get = (url, callback) => {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();

  xhr.onload = () => {
    if (xhr.status === 200) {
      // 서버의 응답을 콜백 함수에 전달하면서 호출하여 응답에 대한 후속 처리르 한다.
      callback(JSON.parse(xhr.response));
    } else {
      console.error(`${xhr.status} ${xhr.statusText}`);
    }
  };
};

const url = "https://jsonplaceholder.typicoe.com/posts/1";

// id가 1인 post userId를 취득
get(`${url}/post/1`, ({ userId }) => {
  console.log(userId);
  // post의 userId를 사용하여 user 정보를 취득
  get(`${url}/users/${userId}`, (userInfo) => {
    console.log(userInfo); //  {id: 1 name: "Leanne Graham", username:"Bret"}
  });
});

위 내용을 보면 Get 요청을 통해 서버로부터 응답(id가1인post)을 취득하고 이 데이터를 사용하여 또다시 GET요청을 한다. 콜백 헬은 가독성을 나쁘게 하며 실수를 유발하는 원인이 된다.

Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성한다

Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달 받는데 이콜백 함수는 reslove reject 함수를 인수로 전달받는다.

const promise = new Promise((resolve, reject) => {
  // 비동기처리 성공
  resolve;

  // 비동기 처리 실패
  reject;
});

const promiseGet = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onload = () => {
      if (xhr.status === 200) {
        // 성공적으로 응답을 전달바등면 ressolve 함수를 호출한다
        resolve(JSON.parse(xhr.response));
      } else {
        // 에러 처리를 위해 reject 함수를 호출한다
        reject(new Error(xhr.status));
      }
    };
  });
};
//promiseGet함수는 Promise를 반환한다
promiseGet("https://jsonplaceholder.typicoe.com/posts/1");

위내용은 만약 비동기 처리가 성공하면 비동기 처리 결과를 resolve 함수에 인수로 전달하면서 호출하고, 비동기 처리가 실패하면 에러를 reject 함수에 인수로 전달하면서 호출한다.

resolve, reject? 프로미스 정적메서드인데 다음에 알아보자..

비동기처리 성공 :resolve 함수를 호출해 프로미스 fulfilled 상태로 변경한다

비동기처리 실패: reject 함수를 호출해 프로미스 reject 상태로변경한다

프로미스는 비동기처리가 실패할 경우 panding 상태에서 rejected 상태로 변화한다. 그리고 비동기 처리결과인 Error 객체를 값으로 갖는다.프로미스 비동기 처리 상태와 처리 결과를 관리하는 객체다

프로미스 후속 처리 메서드

프로미스는 후속 메서드 then, catch, finally를 제공한다.

Promise.prototype.then

then 메서드는 언제나 프로미스를 반환한다. 콜백 함수가 프로미스가 아닌 값을 반환하면 그 값을 암묵적으로 resolve 또는 reject 하여 프로미스를 생성해 반환한다.

Promise.prototype.catch
catch 메서드는 한 개의 콜백 함수를 인수로 전달받는다. catch 메서드의 콜백 함수는 프로미스가 rejected 상태인 경우만 호출한다.

catch 메서드는 then(undifined, onRejected) 과 동일하게 동작한다. 따라서 then 메서드와 마찬가지로 언제나 프로미스를 반환한다.

Promise.prototype.finally
finally 메서드는 한개의 콜백 함수를 인수로 전달 받는다. finally 메서드의 콜백 함수는 프로미스의 성공 또는 실패 와 상관없이 무조건 한 번 호출한다

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

const promiseGet1 = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onload = () => {
      if (xhr.status === 200) {
        // 성공적으로 응답을 전달바등면 ressolve 함수를 호출한다
        resolve(JSON.parse(xhr.response));
      } else {
        // 에러 처리를 위해 reject 함수를 호출한다
        reject(new Error(xhr.status));
      }
    };
  });
};
//promiseGet함수는 Promise를 반환한다
promiseGet("https://jsonplaceholder.typicoe.com/posts/1")
  .then((res) => console.log(res))
  .catch((err) => console.error(err))
  .finally(() => console.log("bye"));