微任务(Microtask)
-
Promise 的处理程序(handlers).then、.catch 和 .finally 都是异步的。
-
即便一个 promise 立即被 resolve,.then、.catch 和
-
.finally 下面 的代码也会在这些处理程序(handler)之前被执行。
let promise = Promise.resolve();
promise.then(() => alert("promise done!")); //这个后显示
alert("code finished"); // 这个 alert 先显示
微任务队列(Microtask queue)
- 队列(queue)是先进先出的:首先进入队列的任务会首先运行。
- 只有在 JavaScript 引擎中没有其它任务在运行时,才开始执行任务队列中的任务。
如果执行顺序对我们很重要该怎么办?我们怎么才能让 code finished 在 promise done 之后运行呢?
Promise.resolve()
.then(() => alert("promise done!"))
.then(() => alert("code finished"));
未处理的rejection
- 如果一个 promise 的 error 未被在微任务队列的末尾进行处理,则会出现“未处理的 rejection”。
- 我们会在 promise 链上添加 .catch 来处理 error
let promise = Promise.reject(new Error("Promise Failed!"));
promise.catch(err => alert('caught'));
// 不会运行:error 已经被处理
window.addEventListener('unhandledrejection', event => alert(event.reason));
- 但是如果我们忘记添加 .catch,那么,微任务队列清空后,JavaScript 引擎会触发下面这事件:
let promise = Promise.reject(new Error("Promise Failed!"));
// Promise Failed!
window.addEventListener('unhandledrejection', event => alert(event.reason));
- 如果我们迟一点再处理这个 error 会怎样?
let promise = Promise.reject(new Error("Promise Failed!"));
setTimeout(() => promise.catch(err => alert('caught')), 1000);
// Error: Promise Failed!
window.addEventListener('unhandledrejection', event => alert(event.reason));
- .then/catch/finally 处理程序(handler)总是在当前代码完成后才会被调用。