一篇文章带你搞懂JavaScript 微任务（Microtask）

大家好，篇文我进阶学习者。章带

一、搞懂前言

Promise 处理始终是微任务异步的，因为所有 promise 行为都会通过内部的篇文 “promise jobs” 队列，也被称为“微任务队列”。章带

Promise 的搞懂处理程序(handlers).then、.catch 和 .finally 都是微任务异步的。

即便一个 promise 立即被 resolve，篇文.then、章带.catch 和 .finally ，搞懂下面的微任务代码也会在这些处理程序(handler)之前被执行。

代码如下：

如果运行它，篇文会首先看到 code finished，章带然后才是搞懂 promise done。这很奇怪，因为这个 promise 肯定是一开始就完成的。

运行结果：

为什么 .then 会在之后才被触发?这是怎么回事?

二、微任务队列(Microtask queue)

1. 如果执行顺序对很重要该怎么办?

Promise 的处理程序(handler)总是会经过这个内部队列。

如果有一个包含多个 .then/catch/finally 的链，高防服务器那么它们中的每一个都是异步执行的。也就是说，它会首先进入队列。

然后在当前代码执行完成并且先前排队的处理程序(handler)都完成时才会被执行。

2. 怎么才能让 code finished 在 promise done 之后运行呢?

很简单，只需要像下面这样使用 .then 将其放入队列：

上面代码，加上这语句就是按照预期执行的。

三、未处理的 rejection

现在，可以确切地看到 JavaScript 是如何发现未处理的 rejection 的。

如果一个 promise 的 error 未被在微*任务*队列的末尾进行处理，则会出现“未处理的 rejection”。

正常来说。

如果预期可能会发生错误，会在 promise 链上添加 .catch 来处理 error：

运行结果：

但是如果忘记添加 .catch，那么，微任务队列清空后，b2b信息网JavaScript 引擎会触发下面这事件：

运行结果：

如果迟一点再处理这个 error 会怎样?

例：

现在，如果运行上面这段代码，会先看到 Promise Failed!，然后才是 caught。

注：

如果并不了解微任务队列，可能会想：“为什么 unhandledrejection 处理程序(handler)会运行?已经捕获(catch)并处理了 error!”。

当微任务队列中的任务都完成时，才会生成 unhandledrejection：引擎会检查 promise，如果 promise 中的任意一个出现 “rejected” 状态，unhandledrejection 事件就会被触发。

在上面这个例子中，被添加到 setTimeout 中的 .catch 也会被触发。只是会在 unhandledrejection 事件出现之后才会被触发。

四、总结

本文基于JavaScript基础，介绍了微任务。其中.then/catch/finally 处理程序(handler)，总是在当前代码完成后才会被调用。

如果需要确保一段代码，在 .then/catch/finally 之后被执行，可以将它添加到链式调用的 .then 中。

在大多数 JavaScript 引擎中(包括浏览器和 Node.js)，微任务(microtask)的概念与“事件循环(event loop)”和“宏任务(macrotasks)”紧密相关。

代码很简单，希望能够帮助你更好的云服务器学习。

最新评论