建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我進(jìn)階學(xué)習(xí)者。
創(chuàng)新互聯(lián)是一家專(zhuān)注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),豐林網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:豐林等地區(qū)。豐林做網(wǎng)站價(jià)格咨詢(xún):028-86922220
一、前言
Promise 處理始終是異步的，因?yàn)樗?promise 行為都會(huì)通過(guò)內(nèi)部的 “promise jobs” 隊(duì)列，也被稱(chēng)為“微任務(wù)隊(duì)列”。
Promise 的處理程序(handlers).then、.catch 和 .finally 都是異步的。
即便一個(gè) promise 立即被 resolve，.then、.catch 和 .finally ，下面的代碼也會(huì)在這些處理程序(handler)之前被執(zhí)行。
代碼如下：
- let promise = Promise.resolve();
- promise.then(() => alert("promise done!"));
- alert("code finished");
- // 這個(gè) alert 先顯示
如果運(yùn)行它，會(huì)首先看到 code finished，然后才是 promise done。這很奇怪，因?yàn)檫@個(gè) promise 肯定是一開(kāi)始就完成的。
運(yùn)行結(jié)果：
為什么 .then 會(huì)在之后才被觸發(fā)?這是怎么回事?
二、微任務(wù)隊(duì)列(Microtask queue)
1. 如果執(zhí)行順序?qū)苤匾撛趺崔k?
Promise 的處理程序(handler)總是會(huì)經(jīng)過(guò)這個(gè)內(nèi)部隊(duì)列。
如果有一個(gè)包含多個(gè) .then/catch/finally 的鏈，那么它們中的每一個(gè)都是異步執(zhí)行的。也就是說(shuō)，它會(huì)首先進(jìn)入隊(duì)列。
然后在當(dāng)前代碼執(zhí)行完成并且先前排隊(duì)的處理程序(handler)都完成時(shí)才會(huì)被執(zhí)行。
2. 怎么才能讓 code finished 在 promise done 之后運(yùn)行呢?
很簡(jiǎn)單，只需要像下面這樣使用 .then 將其放入隊(duì)列：
- Promise.resolve()
- .then(() => alert("promise done!")); //規(guī)定相對(duì)應(yīng)的順序
- .then(() => alert("code finished"));
上面代碼，加上這語(yǔ)句就是按照預(yù)期執(zhí)行的。
三、未處理的 rejection
現(xiàn)在，可以確切地看到 JavaScript 是如何發(fā)現(xiàn)未處理的 rejection 的。
如果一個(gè) promise 的 error 未被在微*任務(wù)*隊(duì)列的末尾進(jìn)行處理，則會(huì)出現(xiàn)“未處理的 rejection”。
正常來(lái)說(shuō)。
如果預(yù)期可能會(huì)發(fā)生錯(cuò)誤，會(huì)在 promise 鏈上添加 .catch 來(lái)處理 error：
- let promise = Promise.reject(new Error("Promise Failed!"));
- promise.catch(err => alert('caught'));
- // 不會(huì)運(yùn)行：error 已經(jīng)被處理
- window.addEventListener('unhandledrejection', event => alert(event.reason));
運(yùn)行結(jié)果：
但是如果忘記添加 .catch，那么，微任務(wù)隊(duì)列清空后，JavaScript 引擎會(huì)觸發(fā)下面這事件：
- let promise = Promise.reject(new Error("Promise Failed!"));
- // Promise Failed!
- window.addEventListener('unhandledrejection', event => alert(event.reason));
運(yùn)行結(jié)果：
如果遲一點(diǎn)再處理這個(gè) error 會(huì)怎樣?
例：
- 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));
現(xiàn)在，如果運(yùn)行上面這段代碼，會(huì)先看到 Promise Failed!，然后才是 caught。
注：
如果并不了解微任務(wù)隊(duì)列，可能會(huì)想：“為什么 unhandledrejection 處理程序(handler)會(huì)運(yùn)行?已經(jīng)捕獲(catch)并處理了 error!”。
當(dāng)微任務(wù)隊(duì)列中的任務(wù)都完成時(shí)，才會(huì)生成 unhandledrejection：引擎會(huì)檢查 promise，如果 promise 中的任意一個(gè)出現(xiàn) “rejected” 狀態(tài)，unhandledrejection 事件就會(huì)被觸發(fā)。
在上面這個(gè)例子中，被添加到 setTimeout 中的 .catch 也會(huì)被觸發(fā)。只是會(huì)在 unhandledrejection 事件出現(xiàn)之后才會(huì)被觸發(fā)。
四、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了微任務(wù)。其中.then/catch/finally 處理程序(handler)，總是在當(dāng)前代碼完成后才會(huì)被調(diào)用。
如果需要確保一段代碼，在 .then/catch/finally 之后被執(zhí)行，可以將它添加到鏈?zhǔn)秸{(diào)用的 .then 中。
在大多數(shù) JavaScript 引擎中(包括瀏覽器和 Node.js)，微任務(wù)(microtask)的概念與“事件循環(huán)(event loop)”和“宏任務(wù)(macrotasks)”緊密相關(guān)。
代碼很簡(jiǎn)單，希望能夠幫助你更好的學(xué)習(xí)。
網(wǎng)頁(yè)標(biāo)題：一篇文章帶你搞懂JavaScript微任務(wù)（Microtask）
當(dāng)前鏈接：http://www.dlmjj.cn/article/dpseish.html
