자바스크립트 Promise

greenTea·2023년 10월 25일

JavaScript의 Promise

콜백지옥

😭콜백 지옥(callback hell) 혹은 "Pyramid of Doom"이라 불리는 현상은 중첩된 콜백이 많아져 코드의 가독성이 떨어지는 것을 말합니다.

지옥...

getData1((error, data1) => {
    if (error) {
        ...
    } else {
        getData2((error, data2) => {
            if (error) {
                ...
            } else {
                getData3((error, data3) => {
                    if (error) {
                       ...
                    } else {
                       ...
                    }
                });
            }
        });
    }
});

콜백 지옥은 이러한 중첩된 구조 때문에 코드의 가독성이 나빠지며, 유지 보수도 어려워집니다. 이러한 문제를 해결하기 위해 Promise가 등장하게 되었습니다.

Promise의 등장 배경

😑비동기 로직을 다루는데 중첩된 콜백의 구조는 코드의 가독성을 해치고 유지 보수를 어렵게 만듭니다. 이런 문제점을 해결하기 위해 Promise가 등장했습니다.

Promise란?

🫡Promise는 JavaScript에서 비동기 연산의 최종 완료 혹은 실패를 나타내는 객체입니다. 상태(state)와 결과(value)를 가지며 상태에는 pending, fulfilled, rejected가 있습니다.

pending: 비동기 작업 대기 중인 상태(처음에 Promise 객체를 만들면 pending 상태가 됩니다.)
fulfilled: 비동기 작업이 성공적으로 처리된 상태
rejected: 비동기 작업을 실패한 상태

Promise 생성하기

Promise를 생성하려면 new Promise 를 사용합니다.

const promise = new Promise((resolve, reject) => {
  // 어떤 비동기 작업
  if (/* 작업이 성공적으로 완료됐을 때 */) {
    resolve('성공!');
  } else {
    reject('오류!');
  }
});

new Promise를 통해 프로미스 객체를 생성합니다. 이 때 resolve와 reject라는 파라미터를 넘기게 되는데 resolve의 경우는 promise가 성공할 경우를 reject는 실패할 경우에 호출되는 메소드입니다.

Promise 사용하기

🤓Promise는 순차적으로 일련의 비동기 작업을 수행하도록 연결할 수 있습니다.

.then(), .catch(), .finally()
Promise가 있으면, .then()을 사용하여 Promise가 완료되면 다음 작업을 진행 할 수 있는 작업을 설정할 수 있습니다. resolve()를 호출 할 경우 then이 실행됩니다.
catch의 경우 reject()를 호출 할 경우 실행됩니다.
finally의 경우 결과에 상관없이 호출 됩니다.
promise
  .then((value) => {
    console.log(value);  // Promise가 성공적으로 완료되면 '성공!'
  })
  .catch((error) => {
    console.log(error);  // Promise가 거절되면 '오류!'
  })
  .finally(() => {
    console.log('이 콜백은 Promise의 결과와 관계없이 항상 호출됩니다.');
  });

🫠아래의 코드의 경우 reject()를 호출하게 되면 catch()가 진행이 됩니다. 이후 2번째 then()또한 진행이 됩니다.

promise
  .then((value) => {
    console.log(value);  // Promise가 성공적으로 완료되면 '성공!'
  })
  .catch((error) => {
    console.log(error);  // Promise가 거절되면 '오류!'
  })
  .then((value) => {
    console.log("hello"); //catch가 진행된 이후에도 실행이 됩니다.
  }
  .finally(() => {
    console.log('이 콜백은 Promise의 결과와 관계없이 항상 호출됩니다.');
  });

Promise의 정적 메서드들

Promise.all(): 모든 Promise들이 완료될 때 완료되는 새로운 Promise를 반환합니다.
Promise.race(): 첫 번째로 완료되는 Promise의 결과를 반환합니다.(결과 상관없이)
Promise.any(): 먼저 완료되는 첫 번째 Promise의 결과를 반환합니다.(fulfilled 상태의 Promise만)
Promise.resolve(): 주어진 값을 사용하여 완료된 Promise 객체를 반환합니다.
Promise.reject(): 주어진 이유로 거부된 Promise 객체를 반환합니다.

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
//1
Promise.all([promise1, promise2])
  .then(values => console.log(values));
//2
Promise.any([promise1, promise2])
  .then(values => console.log(values));
//3
Promise.race([promise1, promise2])
  .then(values => console.log(values));
promise1의 작업과 promise2의 작업 모두가 완료가 된 후에 그 다음 작업을 진행합니다.

둘 중 정상적으로 완료된(fulfilled) 프로미스의 값을 반환합니다.

결과 상관없이 먼저 완료된 프로미스의 값을 반환합니다.