JS 에서 Promise 함수 then 의 비밀 탐구

Promise 개술
Promise 대상 은 CommonJS 작업 팀 이 제시 한 규범 으로 비동기 작업 에 통 일 된 인 터 페 이 스 를 제공 하 는 것 이 목적 이다.
그럼 Promises 가 뭐 예요?
우선,그것 은 하나의 대상 이다.즉,다른 자 바스 크 립 트 대상 의 용법 과 다 를 바 없다.그 다음으로 에이전트 역할(proxy)을 하여 비동기 작업 과 반전 함수 간 의 중개 역할 을 합 니 다.이 는 비동기 작업 으로 하여 금 동기 화 작업 의 인 터 페 이 스 를 갖 추 게 하고 프로그램 이 정상 적 인 동기 화 운행 절 차 를 갖 추 게 하 며 리 셋 함 수 는 더 이상 끼 워 넣 을 필요 가 없다.
쉽게 말 하면 모든 비동기 임 무 는 바로 Promise 대상 으로 돌아 가 는 것 이 고 즉시 돌아 가기 때문에 동기 화 작업 의 절 차 를 사용 할 수 있다 는 것 이다.이 Promises 대상 은 then 방법 이 있 습 니 다.리 셋 함 수 를 지정 하여 비동기 작업 이 끝 난 후에 호출 할 수 있 습 니 다.
Promise 의 then 방법 은 이전 함수 의 실행 결 과 를 받 아들 일 수 있 고 다른 Promise 의 순서 집행 도 보장 할 수 있 습 니 다.이것 은 도대체 어떻게 하 는 것 입 니까?
원리 도(선도)

문제 수요
어떻게 여러 promise 순서 가 실 행 될 것 을 보증 합 니까?
실례:

var f1 = function (){
 return new Promise(function (resolve, reject){
  setTimeout(function (){
   console.log("f1 ok!")
   resolve("f1 ok!");
  }, 1000)
 });
}
var f2 = function (){
 return new Promise(function (resolve, reject){
  setTimeout(function (){
   console.log("f2 ok!")
   resolve("f2 ok!");
  }, 3000)
 });
}
var f3 = function (){
 return new Promise(function (resolve, reject){
  setTimeout(function (){
   console.log("f3 ok!")
   resolve("f3 ok!");
  }, 2000)
 });
}

물론 병행 하려 면 Promise.all 방법 이 생각 나 기 쉽다.

Promise.all([f1(), f2(), f3()]).then(function (data){
 console.log(data)
})
// f1 ok! 
// f3 ok! 
// f2 ok! 
// ["f1 ok!", "f2 ok!", "f3 ok!"]

순서대로 실행 하려 면:

f1().then(f2).then(f3)
// f1 ok!
// f2 ok!
// f3 ok!

//    

function f(all) {
 var promise = Promise.resolve();
 all.forEach((p, index) => {
  promise = promise.then(p)
 })
}
f([f1, f2, f3])

그러면 문제 가 생 겼 습 니 다.then 은 어떻게 순서대로 실 행 했 습 니까?인 자 는 일반 함수 일 수도 있 고 promise 로 돌아 가 는 함수 일 수도 있 습 니 다.
then 의 비밀
많은 promise 를 실현 하 는 라 이브 러 리 가 복잡 합 니 다.만약 에 자신 이 실현 한다 면 다음 과 같은 간단 한 코드 를 참고 할 수 있 습 니 다.

Promise.prototype.then = function(onFulfilled, onRejected) {
 var promise = this;
 return new Promise(function(resolve, reject) {
  function handle(value) {
   var ret = typeof onFulfilled === 'function' && onFulfilled(value) || value;
   if (ret && typeof ret['then'] == 'function') {
    ret.then(function(value) {
     resolve(value);
    }, function(reason) {
     reject(reason);
    });
   } else {
    resolve(ret);
   }
  }
  function errback(reason) {
   reason = typeof onRejected === 'function' && onRejected(reason) || reason;
   reject(reason);
  }
  if (promise._status === 'PENDING') {
   promise._resolves.push(handle);
   promise._rejects.push(errback);
  } else if (promise._status === FULFILLED) { 
   callback(promise._value);
  } else if (promise._status === REJECTED) {
   errback(promise._reason);
  }
 });
}

then 의 실현 에 중점 을 두 고 상기 코드 를 보면 then 마다 돌아 오 는 것 이 무엇 인지,새로운 Promise,새로운 Promise,새로운 Promise 입 니 다.
두 번 째 중점 은 내부 에서 리 셋 함수 운행 결 과 를 처리 한 것 은 promise 의 판단 입 니 다.만약 에 이 promise 운행 이 끝 날 때 까지 기 다 려 야 resolve 가 상 태 를 바 꾸 는 것 입 니 다.관건 은 resolve 의 호출 시기 입 니 다.resolve 의 호출 시 기 를 기 다 려 야 아래로 실행 할 수 있 습 니 다.이 두 단 계 는 then 함수 의 관건 입 니 다.
좀 어 지 럽 죠?처음 그림 을 보 세 요.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.