[JS] 프로미스(Promise) 이해하기

01. 프로미스(Promise)란?

- 자바스크립트 비동기 처리에 사용되는 객체

 

02. 프로미스(Promise) 필요 이유

- 비동기 연산이 종료된 이후 결과 값과 실패 사유를 처리하기 위한 처리기 연결 가능

- 비동기 메서드에서 마치 동기 메서드처럼 값 반환 가능

 

03. 프로미스(Promise) 상태

1. 대기(pending) : 이행하지도, 거부하지도 않은 초기 상태

2. 이행(fulfilled) : 연산이 성공적으로 완료됨

3. 거부(rejected) : 연산이 실패함

※ 이행이나 거부될 때, 프로미스의 then 메서드에 의해 대기열에 추가된 처리기들이 호출됨

 

04. 프로미스(Promise)코드 예제

new Promise((resolveOuter) => {
  resolveOuter(
    new Promise((resolveInner) => {
      setTimeout(resolveInner, 1000);
    }),
  );
});

- 이 프로미스는 생성될 때 resolveOuter가 동기적으로 호출되기 때문에 이미 해결되었지만, 다른 프로미스와 함께 해결되므로 1초 후 내부 프로미스가 이행될 때까지는 이행되지 않음

 

05. 프로미스(Promise) 연결

- 메서드는 정착된 프로미스와 추가 작업을 연결하는 데 사용됨

- 메서드는 포르미스를 반환하므로 연쇄적으로 연결 가능

 

05-1 .then()

- 최대 두개의 인수를 받음

첫번째 인수 : 프로미스의 이행된 경우에 대한 콜백 함수두번째 인수 : 프로미스의 거부된 경우에 대한 콜백 함수

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 300);
});

myPromise
  .then(handleFulfilledA, handleRejectedA)
  .then(handleFulfilledB, handleRejectedB)
  .then(handleFulfilledC, handleRejectedC);

 

05-2 .catch()

- 프로미스가 거부될 때 호출될 함수를 예약

myPromise
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

 

05-3 .finally()

- 프로미스를 처리한 후(이행되거나 거부된 후) 호출할 함수를 예약