Promise 메커니즘 분석

Promise 메커니즘 분석

• new Promise(function () {}) 형태

new Promise(function (resolve, reject) {
  resolve("성공");
});

1. new Promise(function (resolve, reject) {…}prototype.constructor를 호출하며
2. 인스턴스를 만든다.
3. new 연산자로 Promise를 호출하면
4. 일반적으로 new Point(one, two)처럼
5. 인스턴스의 초기값을 파라미터에 작성하지만
6. 비동기 처리를 위한 환경을 만들기 위해
7. 파라미터에 함수를 사용했다.
8. 실행자 함수는 constructor의 확장이며
9. constructor에서 연속해서 실행한다.

• 실행자의 파라미터에 함수 이름 작성

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

// 성공

1. resolve, reject는 함수 이름이며
2. 엔진이 이름의 Function 오브젝트를 생성한다.
3. resolve(”성공”);resolve() 함수를 호출할 수 있다.
4. 실행자의 파라미터가 Function 오브젝트이므로
5. 함수 호출은 단지 파라미터 값인 “성공”을 설정하는 것 외에도
6. 부가적인 처리를 한다는 의도가 포함되어 있다.
7. abc()처럼 실행자의 파라미터에 함수 이름이 없는 함수를 호출하면then()의 핸들러 함수가 실행되지 않는다.
8. 에러가 발생하지 않지만
9. resolve(”성공”)이 호출되면파라미터의 resolve 함수는 엔진에서 만든 것이므로
10. 엔진 내부 처리를 할 수 있다.
11. 실행자 파라미터의 resolve가 호출되며

• 파라미터 이치로 성공/실패 함수 처리

new Promise((one, two) => {
  two();
}).then(
  (value) => {
    console.log("성공");
  },
  (reason) => {
    console.log("실패");
  }
);

// 실패

1. two()를 호출하면
2. then()의 두 번째 파라미터 함수가 호출된다.
3. 두 번째 파라미터는 실패를 나타내는 함수다.
4. 즉, 엔진은 호출된 파라미터 위치의 함수로 성공/실패를 처리한다는 뜻이다.
5. 임의의 함수 이름을 사용할 수 있다.일반적인 시맨틱이기 때문이다.
6. resolve()와 reject()를 사용한 것은
7. 호출딘 파라미터의 함수에 따라fulfilled 또는 rejected를 Promise 인스턴스의
8. [[PromiseStatus]]에 설정한다.
9. 비동기 처리를 위한 즉, then()에서 사용하기 위한

• 실행자에 resolve(), reject() 순서로 작성

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

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

// 실패
// 성공

1. 성공과 실패가 모두 발생한다는 것은 논리에 맞지 않는다.
2. 따라서 성공/실패 중에서 하나만 발생한다.
3. reject() 함수, resolve() 함수 순서로 작성하면
4. [[PromiseStatus]]가 rejected가 된다.
5. resolve() 함수, reject() 함수 순서로 작성하면
6. [[PromiseStatus]]가 resolve가 된다.
7. 먼저 호출한 함수의 상태를 설정한다.

<aside> 💡 근데 catch문을 쓰면 결과가 달라진다. 왜그럴까?

</aside>

• then()의 핸들러 함수에서 사용할 값을 인스턴스에 저장

new Promise((resolve, reject) => {
  resolve("성공");
}).then((value) => {
  console.log(value);
});
console.log("끝");

1. resolve(”성공”);
2. 파라미터 값 “성공”을 Promise 인스턴스의 [[PromiseValue]]에 저장한다.
3. then()이 비동기로 처리되므로then에서 한 번 끊어지기 때문에 값을 기억해야 한다!
4. then()에서 값을 사용하기 위한 것이다.
5. [[PromiseStatus]]에 값을 설정하는 것도 같은 접근이다.

• Promise 인스턴스 반환

new Promise((resolve) => {
  resolve(100);
})
  .then((value) => {
    console.log(value);
    return 200;
  })
  .then((value) => {
    console.log(value);
  });

// 100
// 200

1. then(), catch()에서
2. Promise 인스턴스를 생성하여 반환한다.
3. 처음의 then()은 비동기로 실행되지만
4. 이어지는 처리는 동기/비동기로 실행할 수 있다.
5. 실행 중인 then()에서 비동기 처리를 하지 않으면
6. 이어지는 then()/catch()는 동기 형태로 처리하게 된다.
7. 실행 중인 then()에서 다시 비동기로 처리하면
   • return 200이 아니라 Promise 인스턴스를 반환하면 비동기로 처리할 수 있다.
8. 이어지는 then()/catch()는 비동기로 처리하게 된다.
9. Promise 인스턴스를 생성하여 반환하므로
   • new Promise로 인스턴스를 생성한다 하더라도 then에서 받을 수 있으니
   • 동기/비동기를 모두 커버할 수 있다.
10. 이어지는 처리를 동기/비동기로 처리할 수 있다.