진정으로 이해해야 할 약속-JS 튜토리얼-php.cn

진정으로 이해해야 할 약속

관련 학습 권장 사항: javascript 학습 튜토리얼

약속 API에 관해서는 누구나 능숙하게 사용할 수 있어야 하지만, 여전히 마이크로 태스크와 관련된 지식 사각지대가 있을 수 있습니다.

전제 지식

본문을 시작하기 전에 이 기사에 포함된 일부 내용의 분위기를 미리 설정해 보겠습니다.

Promise 마이크로태스크와 관련된 API는 무엇인가요?

Promise에서는 then, catch 및 finally와 같이 상태 변경이 관련된 후에 실행해야 하는 콜백만 마이크로 작업으로 간주됩니다. 다른 모든 코드 실행은 매크로 작업(동기 실행)입니다. then、 catch 、finally ，其他所有的代码执行都是宏任务（同步执行）。

上图中蓝色为同步执行，黄色为异步执行（丢到微任务队列中）。

这些微任务何时被加入微任务队列？

这个问题我们根据 ecma 规范来看：

如果此时 Promise 状态为 pending，那么成功或失败的回调会分别被加入至 [[PromiseFulfillReactions]] 和 [[PromiseRejectReactions]] 中。如果你看过手写 Promise 的代码的话，应该能发现有两个数组存储这些回调函数。
如果此时 Promise 状态为非 pending 时，回调会成为 Promise Jobs，也就是微任务。

了解完以上知识后，正片开始。

同一个 then，不同的微任务执行

初级

Promise.resolve()
  .then(() => {    console.log("then1");    Promise.resolve().then(() => {      console.log("then1-1");
    });
  })
  .then(() => {    console.log("then2");
  });复制代码

로그인 후 복사

以上代码大家应该都能得出正确的答案：then1 → then1-1 → then2。

虽然 then 是同步执行，并且状态也已经变更。但这并不代表每次遇到 then 时我们都需要把它的回调丢入微任务队列中，而是等待 then 的回调执行完毕后再根据情况执行对应操作。

基于此，我们可以得出第一个结论：链式调用中，只有前一个 then 的回调执行完毕后，跟着的 then 中的回调才会被加入至微任务队列。

中级

大家都知道了 Promise resolve 后，跟着的 then 中的回调会马上进入微任务队列。

那么以下代码你认为的输出会是什么？

let p = Promise.resolve();

p.then(() => {  console.log("then1");  Promise.resolve().then(() => {    console.log("then1-1");
  });
}).then(() => {  console.log("then1-2");
});

p.then(() => {  console.log("then2");
}); 
复制代码

로그인 후 복사

按照一开始的认知我们不难得出 then2 会在 then1-1 后输出，但是实际情况却是相反的。

基于此我们得出第二个结论：每个链式调用的开端会首先依次进入微任务队列。

接下来我们换个写法：

let p = Promise.resolve().then(() => {  console.log("then1");  Promise.resolve().then(() => {    console.log("then1-1");
  });
}).then(() => {  console.log("then2");
});

p.then(() => {  console.log("then3");
});复制代码

로그인 후 복사

上述代码其实有个陷阱，then 每次都会返回一个新的 Promise，此时的 p 已经不是 Promise.resolve() 生成的，而是最后一个 then 生成的，因此 then3 应该是在 then2 后打印出来的。

顺便我们也可以把之前得出的结论优化为：同一个 Promise 的每个链式调用的开端会首先依次进入微任务队列。

高级

以下大家可以猜猜 then1-2 会在何时打印出来？

Promise.resolve()
  .then(() => {    console.log("then1");    Promise.resolve()
      .then(() => {        console.log("then1-1");        return 1;
      })
      .then(() => {        console.log("then1-2");
      });
  })
  .then(() => {    console.log("then2");
  })
  .then(() => {    console.log("then3");
  })
  .then(() => {    console.log("then4");
  });复制代码

로그인 후 복사

这题肯定是简单的，记住第一个结论就能得出答案，以下是解析：

第一次 resolve 后第一个 then 的回调进入微任务队列并执行，打印 then1
第二次 resolve 后内部第一个 then 的回调进入微任务队列，此时外部第一个 then 的回调全部执行完毕，需要将外部的第二个 then 回调也插入微任务队列。
执行微任务，打印 then1-1 和 then2，然后分别再将之后 then 中的回调插入微任务队列
执行微任务，打印 then1-2 和 then3 ，之后的内容就不一一说明了

接下来我们把 return 1 修改一下，结果可就大不相同啦：

Promise.resolve()
  .then(() => {    console.log("then1");    Promise.resolve()
      .then(() => {        console.log("then1-1");        return Promise.resolve();
      })
      .then(() => {        console.log("then1-2");
      });
  })
  .then(() => {    console.log("then2");
  })
  .then(() => {    console.log("then3");
  })
  .then(() => {    console.log("then4");
  });复制代码

로그인 후 복사

当我们 return Promise.resolve() 时，你猜猜 then1-2 会何时打印了？

答案是最后一个才被打印出来。

为什么在 then 中分别 return<그림>

위 그림에서 파란색은 동기 실행을 나타내고 노란색은 비동기 실행(마이크로태스크 대기열에 던져짐)을 나타냅니다. 🎜

이러한 마이크로태스크는 언제 마이크로태스크 대기열에 추가되나요? 🎜🎜ecma 사양에 따라 이 문제를 살펴보겠습니다. 🎜
🎜현재 Promise 상태가 보류 중이면 성공 또는 실패한 콜백이 `[[PromiseFulfillReactions]]<에 추가됩니다. /code> 및 <code>[[PromiseRejectReactions]]`. 손으로 작성한 Promise 코드를 살펴보면 이러한 콜백 함수를 저장하는 배열이 두 개 있다는 것을 알 수 있습니다. 🎜
🎜현재 Promise 상태가 보류 중이 아닌 경우 콜백은 마이크로태스크인 Promise Job이 됩니다. 🎜
🎜위의 지식을 이해한 후 본편이 시작됩니다. 🎜

같으면 다른 마이크로 작업 실행🎜

초급🎜

if (x instanceof MyPromise) {  if (x.currentState === PENDING) {
  } else {
    x.then(resolve, reject);
  }  return;
}复制代码

로그인 후 복사

🎜누구나 할 수 있어야 합니다. 위 코드 정답을 제시하세요: then1 → then1-1 → then2. 🎜🎜then이 동기적으로 실행되어 상태가 변경되었지만. 하지만 이것이 then을 만날 때마다 콜백을 마이크로태스크 대기열에 던져야 한다는 의미는 아닙니다. 대신 then의 콜백이 완료될 때까지 기다려야 합니다. 그런 다음 상황에 따라 해당 작업을 수행하십시오. 🎜🎜이를 바탕으로 첫 번째 결론을 내릴 수 있습니다. 체인 호출에서는 이전 then 콜백이 실행된 후에만 다음 만 수행됩니다. Strong>then의 콜백이 마이크로태스크 대기열에 추가됩니다. 🎜

중급 🎜🎜모두가 `Promise 해결` 후에 다음 `then`의 콜백이 즉시 Enter라는 것을 알고 있습니다. 마이크로태스크 큐. 🎜🎜그러면 다음 코드의 출력은 어떻게 될까요? 🎜rrreee🎜초기 이해에 따르면 `then2`가 `then1-1` 다음에 출력될 것이라고 결론을 내리는 것은 어렵지 않지만 실제 상황은 그 반대입니다. 🎜🎜이를 바탕으로 우리는 두 번째 결론을 내립니다.각 체인 호출의 시작은 먼저 마이크로태스크 대기열에 순차적으로 들어갑니다. 🎜🎜다음으로 작성 방식을 바꿔 보겠습니다. 🎜rrreee🎜위 코드에는 실제로 트랩이 있습니다. `then`은 이때마다 `p를 반환합니다.` 더 이상 `Promise.resolve()`에 의해 생성되지 않고 마지막 `then`에 의해 생성되므로 `then3`은 < code>then2가 출력됩니다. 🎜🎜그런데 이전에 도달한 결론을 최적화할 수도 있습니다.동일한 Promise의 각 체인 호출이 시작되면 먼저 마이크로태스크 대기열에 순차적으로 들어갑니다. 🎜

Advanced🎜🎜 `then1-2`가 언제 인쇄될지 추측할 수 있나요? 🎜rrreee🎜이 질문은 확실히 간단합니다. 첫 번째 결론만 기억하면 답을 얻을 수 있습니다. 🎜
🎜첫 번째 `resolve` 코드 콜백>then이 마이크로태스크 대기열에 들어가서 실행되어 `then1`🎜
🎜두 번째 `resolve` 이후 첫 번째 내부 대기열을 인쇄합니다. `then`의 콜백은 마이크로태스크 큐에 들어갑니다. 이때 첫 번째 외부 `then`의 콜백이 모두 실행되었고, 두 번째 외부 `then`이 실행되었습니다. > 실행이 필요합니다. 콜백도 마이크로태스크 대기열에 삽입됩니다. 🎜
🎜마이크로 작업을 실행하고 `then1-1` 및 `then2`를 인쇄한 다음 각각 `then`에서 콜백을 호출합니다. the microtask queue🎜
🎜microtask를 실행하고 `then1-2`와 `then3`를 인쇄하세요. 다음 내용은 하나씩 설명하지 않습니다🎜
🎜다음으로 `return 1`을 수정했는데 결과는 상당히 다릅니다. 🎜rrreee🎜 `return Promise.resolve()` 를 사용하면 `>then1-2`가 인쇄됩니까? 🎜🎜정답은 마지막에 인쇄된 답변입니다. 🎜🎜 `then`에 `return`이 다른데 왜 마이크로태스크의 실행 순서가 이렇게 크게 바뀌나요? 다음은 저자의 분석이다. 🎜
PS：`then` 返回一个新的 Promise，并且会用这个 Promise 去 `resolve` 返回值，这个概念需要大家先了解一下。

根据 Promise A+ 规范

根据规范 2.3.2，如果 resolve 了一个 Promise，需要为其加上一个 then 并 resolve。

if (x instanceof MyPromise) {  if (x.currentState === PENDING) {
  } else {
    x.then(resolve, reject);
  }  return;
}复制代码

로그인 후 복사

上述代码节选自手写 Promise 实现。

那么根据 A+ 规范来说，如果我们在 then 中返回了 Promise.resolve 的话会多入队一次微任务，但是这个结论还是与实际不符的，因此我们还需要寻找其他权威的文档。

根据 ECMA - 262 规范

根据规范 25.6.1.3.2，当 Promise resolve 了一个 Promise 时，会产生一个NewPromiseResolveThenableJob，这是属于 Promise Jobs 中的一种，也就是微任务。

This Job uses the supplied thenable and its then method to resolve the given promise. This process must take place as a Job to ensure that the evaluation of the then method occurs after evaluation of any surrounding code has completed.

并且该 Jobs 还会调用一次 then 函数来 resolve Promise，这也就又生成了一次微任务。

这就是为什么会触发两次微任务的来源。