本当に理解する必要がある約束

関連する学習の推奨事項: JavaScript 学習チュートリアル

API に関しては、誰もが上手に使用できるようにすることをお約束します。ただし、マイクロタスクに関する知識の盲点がまだあるかもしれません。

前提知識

本文を始める前に、この記事に含まれるいくつかの内容について、事前に雰囲気を決めておきます。

約束どの API にマイクロタスクが含まれますか?

Promise では、then、catch、finally など、状態変更後に実行する必要があるコールバックのみがマイクロタスクとみなされます。 、他のすべてのコード実行はマクロ タスク (同期実行) です。

上の図では、青色は同期実行を示し、黄色は非同期実行 (マイクロタスク キューにスローされる) を示します。

これらのマイクロタスクはいつマイクロタスク キューに追加されますか?

ecma 仕様に従ってこの問題を検討します:

• この時点で Promise ステータスが保留中の場合、成功または失敗したコールバックが # に追加されます。 ##[[PromiseFulfillReactions]] および [[PromiseRejectReactions]]。手書きの Promise コードを見ると、これらのコールバック関数を格納する配列が 2 つあることがわかるはずです。

• 現時点で Promise ステータスが保留中でない場合、コールバックはマイクロタスクである Promise ジョブになります。

上記の知識を理解した上で、本編が始まります。

同じように、さまざまなマイクロタスクが実行されます

Elementary

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 のコールバックはマイクロタスク キューに追加されます。 中級

Promisesolve

の後、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");
}); 
复制代码

当初の理解によれば、

then1-1

の後に then2 が出力されると結論付けるのは難しくありませんが、実際の状況はその逆です。 これに基づいて、2 番目の結論を導き出します。

各チェーン呼び出しの開始は、まず順番にマイクロタスク キューに入ります。

次に書き方を変えてみましょう:

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 を返します。 time p は Promise.resolve() によって生成されなくなりましたが、最後の then によって生成されるため、then3 は ## に含まれる必要があります#then2 が後に出力されます。 ところで、以前に到達した結論を最適化することもできます。 同じ Promise の各チェーン コールの先頭が、最初に順番にマイクロタスク キューに入ります。

Advanced

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");
  });复制代码

この質問は間違いなく簡単です。答えを得るために最初の結論を覚えておいてください。分析は次のとおりです:

初回

解決
• 後最初の

  then コールバックはマイクロタスク キューに入り、実行されます。2 回目は then1

  を出力します。
resolve
• 最初の内部

  then コールバックがマイクロタスク キューに入ります。この時点で、すべての外部の最初の then コールバックが実行されており、2 番目の外部 は 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");
  });复制代码

When we 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，这也就又生成了一次微任务。

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

最后

文章到这里就完结了，大家有什么疑问都可以在评论区提出。

想了解更多编程学习，敬请关注php培训栏目！

以上が本当に理解する必要がある約束の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。