静下心来的个人专栏
上一篇

Promise添加handler

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

AddHandler

在Promise中,对于在Promise中已经处理后添加的fullfillment,rejection或者settlement,这些处理器任然会执行。这将允许您随时添加各种处理器(fullfillment,rejection,settlement),并保证它们被执行:

举个例子:

 const promise = fetch("books.json");

 // original fulfillment handler
 promise.then(response => {
 	console.log(response.status);

	
 	// now add another
 	promise.then(response => {
 		console.log(response.statusText);
 	});
 });

在这段代码中,fullfillment处理器添加到同一个promise。一旦promise完成,那么新添加到处理器将被引擎添加到一个微任务队列,并准备执行。rejection和settlement的处理方式和fullfillment相同。

 

Handlers and MicroTasks

在程序的常规流程中执行JavaScript代码作为任务执行,也就是说 JavaScript 运行时已经创建了一个新的执行上下文并完全执行代码,完成后退出。例如,网页中按钮的 onclick 处理程序作为任务执行,单击按钮时,会创建一个新任务并执行 onclick 处理程序。一旦完成,JavaScript 运行时会等待下一次交互以执行更多代码。 然而,Promise 处理程序以不同的方式执行。

 

所有的 Promise 处理程序,无论是fullfillment、rejection还是settlement,都作为 JavaScript 引擎内部的微任务执行。微任务排队,在 JavaScript 运行时变为空闲之前,在当前运行的任务完成后立即执行。调用 then()、catch() 或 finally() 会告诉 Promise 在完成 Promise 后将指定的微任务排队。

 

这与使用 setTimeout() 或 setInterval() 创建计时器不同,两者都会创建新任务以在稍后的时间点执行。 排队的 Promise 处理程序将始终在同一任务中排队的计时器之前执行。您可以使用全局 queueMicrotask() 函数自行测试,该函数用于在 Promise 之外创建微任务:

 setTimeout(() => {
 	console.log("timer");

	
 	queueMicrotask(() => {
 	console.log("microtask in timer");
 });

 }, 0);

 queueMicrotask(() => {
 	console.log("microtask");
 });

 

在这段代码中,创建了一个延迟为 0 毫秒的计时器,并在该计时器内创建了一个新的微任务。此外,在计时器之外创建了一个微任务。 当这段代码执行时,你会看到以下输出到控制台:

 microtask
 timer
 microtask in timer

即使定时器设置为 0 毫秒的延迟,微任务首先执行,然后是定时器,然后是定时器内部的微任务。

关于微任务(包括所有 Promise 处理程序)要记住的最重要的一点是,一旦任务完成,它们就会尽快执行。 这最大限度地减少了promise创建和回调之间时间的反馈,使promise适用于运行时性能很重要的情况。

 

 

 

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们