🔜
Vorausgesetzte Kenntnisse
Bevor wir mit dem Haupttext beginnen, wollen wir im Voraus den Ton für einige Inhalte dieses Artikels festlegen.Versprechen Welche APIs beinhalten Mikrotasks?
In Promise gelten nur Rückrufe, die nach Zustandsänderungen ausgeführt werden müssen, als Mikrotasks, wie z. B.then
,catch
undfinally
. Alle anderen Codeausführungen sind Makroaufgaben (synchrone Ausführung).
Im Bild oben steht Blau für die synchrone Ausführung und Gelb für die asynchrone Ausführung (in die Mikrotask-Warteschlange geworfen).
[[PromiseFulfillReactions]] und <code>[[PromiseRejectReactions]]
. Wenn Sie sich den handgeschriebenen Promise-Code angesehen haben, sollten Sie feststellen, dass es zwei Arrays gibt, in denen diese Rückruffunktionen gespeichert sind.
then
、 catch
、finally
,其他所有的代码执行都是宏任务(同步执行)。上图中蓝色为同步执行,黄色为异步执行(丢到微任务队列中)。
这个问题我们根据 ecma 规范来看:
如果此时 Promise 状态为 pending,那么成功或失败的回调会分别被加入至 [[PromiseFulfillReactions]]
和 [[PromiseRejectReactions]]
中。如果你看过手写 Promise 的代码的话,应该能发现有两个数组存储这些回调函数。
如果此时 Promise 状态为非 pending 时,回调会成为 Promise Jobs,也就是微任务。
了解完以上知识后,正片开始。
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
Nachdem wir die oben genannten Kenntnisse verstanden haben, beginnt der Hauptfilm.
if (x instanceof MyPromise) { if (x.currentState === PENDING) { } else { x.then(resolve, reject); } return; }复制代码
then1 → then1-1 → then2
. 🎜🎜Obwohl then
synchron ausgeführt wird und sich der Status geändert hat. Dies bedeutet jedoch nicht, dass wir jedes Mal, wenn wir auf then
stoßen, dessen Rückruf in die Mikrotask-Warteschlange werfen müssen. Stattdessen müssen wir warten, bis der Rückruf von then
abgeschlossen ist und verwenden Sie es dann entsprechend der Situation. 🎜🎜Auf dieser Grundlage können wir die erste Schlussfolgerung ziehen: Bei Kettenaufrufen wird erst nach dem vorherigen dann
Rückruf ausgeführt, der folgende Nur Der Rückruf in strong>then
wird zur Mikrotask-Warteschlange hinzugefügt. 🎜Versprechen gelöst
der Rückruf im folgenden dann
sofort eingegeben wird die Mikrotask-Warteschlange. 🎜🎜Was wird Ihrer Meinung nach die Ausgabe des folgenden Codes sein? 🎜rrreee🎜Nach unserem anfänglichen Verständnis ist es nicht schwer zu schließen, dass then2
nach then1-1
ausgegeben wird, aber die tatsächliche Situation ist das Gegenteil. 🎜🎜Auf dieser Grundlage ziehen wir die zweite Schlussfolgerung:Der Beginn jedes Kettenaufrufs gelangt zuerst nacheinander in die Mikrotask-Warteschlange. 🎜🎜Als nächstes ändern wir die Schreibweise: 🎜rrreee🎜Der obige Code hat tatsächlich eine Falle, then
gibt zu diesem Zeitpunkt ein neues Versprechen zurück Es wird nicht mehr von Promise.resolve()
generiert, sondern vom letzten then
, daher sollte then3
in < sein code>then2 code> wird ausgedruckt. 🎜🎜Übrigens können wir auch die Schlussfolgerung, zu der wir zuvor gelangt sind, optimieren:Der Anfang jedes Kettenaufrufs desselben Versprechens wird zuerst nacheinander in die Mikrotask-Warteschlange eingegeben. 🎜then1-2
gedruckt wird? 🎜rrreee🎜Diese Frage ist definitiv einfach. Merken Sie sich einfach die erste Schlussfolgerung und Sie können die Antwort erhalten: 🎜resolve
Rückruf von Code >then tritt in die Mikrotask-Warteschlange ein und wird ausgeführt, wobei der erste interne nach then1
🎜resolve
gedruckt wird Der Rückruf von then
gelangt in die Mikrotask-Warteschlange. Zu diesem Zeitpunkt wurden alle Rückrufe des ersten externen then
und des zweiten externen then
ausgeführt > muss ausgeführt werden. Rückrufe werden ebenfalls in die Mikrotask-Warteschlange eingefügt. 🎜then1-1
und then2
aus und rufen Sie dann die Rückrufe in then
bzw. Einfügen auf die Mikrotask-Warteschlange🎜then1-2
und then3
, der folgende Inhalt wird nicht einzeln erklärt🎜 li>return 1
, und das Ergebnis ist ganz anders: 🎜rrreee🎜Wenn wir return Promise.resolve()
, rate wann then1-2
wird gedruckt? 🎜🎜Die Antwort ist die zuletzt gedruckte. 🎜🎜Warum gibt es eine so große Änderung in der Ausführungsreihenfolge von Mikrotasks, wenn es return
verschiedene Dinge in then
gibt? Das Folgende ist die Analyse des Autors. 🎜PS:then
返回一个新的 Promise,并且会用这个 Promise 去 resolve
返回值,这个概念需要大家先了解一下。
根据规范 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
的话会多入队一次微任务,但是这个结论还是与实际不符的,因此我们还需要寻找其他权威的文档。
根据规范 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培训栏目!
Das obige ist der detaillierte Inhalt vonVersprechen, die wirklich verstanden werden müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!