Promise의 처리 흐름 및 상태에 대해 알아보자!

인프런 김영보님의 자바스크립트 ES6+ 심화 강좌 내용을 직접 정리한 글입니다.

도움이 되시길 바래요!

Promise 개요

• 자바스크립트는 기본적으로 동기로 실행
  • 실행이 끝나야 다음 코드를 실행
• Promise는 비동기로 처리(실행)한다.
  • 코드를 연속으로 처리(실행)하지 않고
  • 중간에 흐름이 끊어졌다가
  • 연결된 코드를 처리할 수 있는 환경이 되었을 때 실행한다.
  • 이를 위한 메커니즘을 갖고 있다.
• DOM 스펙에서 Javascript 스펙으로 전환

Promise 처리 흐름

• Promise 처리(실행) 흐름 개요

const obj = new Promise((resolve, reject) => {
  resolve();
  console.log("Promise");
});

obj.then(
  (value) => {
    console.log("성공");
  },
  (reason) => {
    console.log("실패");
  }
);

console.log("마지막");

• new Promise()를 실행한다.
  • 파라미터의 함수를 실행한다.
  • resolve()를 호출하지 않는다.
  • log(”Promise”) 실행한다.
  • obj 변수에 Promise 인스턴스 할당
• obj.then()을 실행하지 않고 넘어간다.
• 마지막 줄의 log(”마지막”) 실행한다.
• resolve() 실행
  • then()의 첫 번째 파라미터 함수 실행
    • reject()가 실행되면 두 번째 파라미터의 함수가 실행된다.
  • log(”성공”) 실행

이것이 Promise 처리의 기본 흐름이다.

Promise 상태

• 상태는 세 가지며, 하나만 발생한다.
  • pending, settled(fulfilled, rejected)
• pending 상태
  • new Promise()로 인스턴스 생성

• new 키워드로 Promise 인스턴스 생성 시점이 상태는 pending이다.
• settled 상태
  • pending이 종료된 상태를 나타내며
  • fulfilled와 rejected 상태로 구분
  • 바인딩한 핸들러 함수가 호출된다.
• fulfilled(성공) : then()의 첫 번째 함수 호출
• rejected(실패) : then()의 두 번째 함수 호출

<aside> 💡 pending : 진행 중인 fulfilled : 이행된, 수행된

</aside>

• settled

const obj = new Promise((resolve, reject) => {
  reject();
  console.log("pending");
});

obj.then(
  (value) => {
    console.log("성공");
  },
  (reason) => {
    console.log("실패");
  }
);

console.log("마지막");

상태에 따른 처리

동기로 실행하면 상태 코드가 필요 없다.

그런데 인스턴스를 만들고 resolve를 호출하는 것은 동기가 아니다.

실행할 수 있는 상태가 되었을 때 resolve를 호출하게 되는 것이다.

상태 코드를 가지고 엔진은 처리를 하게 된다.

에러가 없으면 fulfilled 상태로 설정 후 첫 번째 파라미터의 함수 호출

Promise 인스턴스 생성

new Promise()

• Promise 인스턴스를 생성하여 반환한다.
• 파라미터에 실행자(executer) 함수를 작성한다.
  • function (reslove, reject) {…}
  • 성공, 실패 처리 함수 이름
  • 실행자 코드

  const obj = new Promise((resolve, reject) => {
    resolve("성공");
    reject("실패");
  });
  
  obj.then(
    (value) => {
      console.log(value);
    },
    (reason) => {
      console.log(reason);
    }
  );
  

  1. const obj = new Promise((resolve, reject) => {…}
  2. Promise 인스턴스를 생성하여 obj에 할당한다.
  3. resolve와 reject 이름의 Function 오브젝트를 생성하여 인스턴스에 설정한다.
  4. resolve(’성공’); reject(’실패’);실패하면 reject()가 호출딘다.
  5. 실행자 처리를 성공하면 resolve()가 호출되고
  6. 지금 호출하지 않고 코드 끝까지 실행한 후 호출한다.
  7. 이것이 Promise의 비동기 처리(실행)이다.
  8. obj.then((value)⇒{.1.}, (reason) ⇒ {.2.});
  9. then()을 실행하지 않고 아래로 내려간다.
  10. log(”끝”)을 실행한다.실행자의 resolve()와 reject() 실행이 남았다.
  11. 여기서 전체 흐름이 끝나지만
  12. 실행자에서 resolve(’성공’) 또는 reject(’실패’)를 호출한다.
  13. 상태가 하나만 발생하므로 상태에 해당하는 함수만 호출한다.
  14. then()을 호출한다.
  15. then() 단위로 파라미터의 함수를 실행하게 된다.
  16. then((value) ⇒ {log(value)},then()의 첫 번째 파라미터 함수가 실행되며
  17. resolve(”성공”)에서 “성공”이 value에 설정된다.
  18. 실행자에서 resolve(’성공’)을 호출하면
  19. 엔진에서는 상태(fulfilled, rejected)에 따라
  20. 파라미터의 핸들러 함수를 실행한다.
  21. then((reason) ⇒ {log(reason)});
  22. 실행자에서 reject(”실패”)를 호출하면 then()의 두 번째 파라미터 함수가 실행되며 reject(”실패”)에서 “실패”가 reason에 설정된다.

obj.then()

• 스펙 : deferred action
  • MDN ; Promise chain
  • obj.then(value) ⇒ {log(value)}, (reason ⇒ {log(reason)});
• Promise 오브젝트 형태

const promise = Promise

1. Promise의 오브젝트 형태를 살펴보자.
2. promise를 펼치면 프로퍼티와 함수가 있다.
3. prototype에 constructor가 있으며 메소드가 있다.
   • 자바스크립트의 일반적인 형태

const obj = new Promise((resolve, reject) => {
  resolve([1, 2, 3]);
  reject("실패");
  console.log("실행자");
});

1. resolve와 reject 이름의 Function 오브젝트를 생성한다.
   • Function 오브젝트이므로 호출할 수 있다.

*** 1-1는 코드 끝까지 처리한 후 실행한다.

1-1. resolve([1, 2, 3])을 호출하며 then()이 호출된다.

• [[PromiseStatus]] : “resolved”이므로
• then()의 첫 번째 파라미터 함수를 실행하게 된다.

1. obj.__proto__를 펼치면
   • Promise.prototype에 연결된 메소드가 표시된다.
2. [[PromiseStatus]] : “resolved”
   • Promise 상태를 나타내며 “fulfilled” 상태를 뜻한다.
3. [[PromiseValue]] : Array(3)

• resolve([1, 2, 3])의 파라미터에 작성한 값이다.

1. [1, 2, 3]이 출력된다.

obj.then(
  (value) => {
    console.log(value);
		// resolve([1, 2, 3])의 [1, 2, 3]이 value에 설정된다.
  },
  (reason) => {
    console.log(reason);
  }
);

1. console.log(”끝”)을 실행하다.
   • 실행자 블록으로 이동한다.