建站
咨詢
售后
建站咨詢
新聞中心
如何理解JavaScript 事件循環(huán)中的微任務(wù)Microtask，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、靖州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城網(wǎng)站定制開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為靖州等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
微任務(wù)(Microtask)
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)始就完成的。
為什么 .then 會(huì)在之后才被觸發(fā)?這是怎么回事?
微任務(wù)隊(duì)列(Microtask queue)
異步任務(wù)需要適當(dāng)?shù)墓芾?。為此，ECMA 標(biāo)準(zhǔn)規(guī)定了一個(gè)內(nèi)部隊(duì)列 PromiseJobs，通常被稱為“微任務(wù)隊(duì)列(microtask queue)”(V8 術(shù)語(yǔ))。
如 規(guī)范[1] 中所述：
隊(duì)列(queue)是先進(jìn)先出的：首先進(jìn)入隊(duì)列的任務(wù)會(huì)首先運(yùn)行。
只有在 JavaScript 引擎中沒(méi)有其它任務(wù)在運(yùn)行時(shí)，才開(kāi)始執(zhí)行任務(wù)隊(duì)列中的任務(wù)。
或者，簡(jiǎn)單地說(shuō)，當(dāng)一個(gè) promise 準(zhǔn)備就緒時(shí)，它的 .then/catch/finally 處理程序(handler)就會(huì)被放入隊(duì)列中：但是它們不會(huì)立即被執(zhí)行。當(dāng) JavaScript 引擎執(zhí)行完當(dāng)前的代碼，它會(huì)從隊(duì)列中獲取任務(wù)并執(zhí)行它。
這就是為什么在上面那個(gè)示例中 "code finished" 會(huì)先顯示。
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í)行。
如果執(zhí)行順序?qū)ξ覀兒苤匾撛趺崔k?我們?cè)趺床拍茏?code finished 在 promise done 之后運(yùn)行呢?
很簡(jiǎn)單，只需要像下面這樣使用 .then 將其放入隊(duì)列：
Promise.resolve() .then(() => alert("promise done!")) .then(() => alert("code finished"));現(xiàn)在代碼就是按照預(yù)期執(zhí)行的。
未處理的 rejection
還記得 使用 promise 進(jìn)行錯(cuò)誤處理[2] 一章中的 unhandledrejection 事件嗎?
現(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));但是如果我們忘記添加 .catch，那么，微任務(wù)隊(duì)列清空后，JavaScript 引擎會(huì)觸發(fā)下面這事件：
let promise = Promise.reject(new Error("Promise Failed!")); // Promise Failed! window.addEventListener('unhandledrejection', event => alert(event.reason));如果我們遲一點(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!”
但是現(xiàn)在我們知道了，當(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ā)，所以它并沒(méi)有改變什么(沒(méi)有發(fā)揮作用)。
Promise 處理始終是異步的，因?yàn)樗?promise 行為都會(huì)通過(guò)內(nèi)部的 "promise jobs" 隊(duì)列，也被稱為“微任務(wù)隊(duì)列”(V8 術(shù)語(yǔ))。
因此，.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)。由于這些概念跟 promise 沒(méi)有直接關(guān)系，所以我們將在 圖解 JavaScript 事件循環(huán)：微任務(wù)和宏任務(wù) 一文中對(duì)它們進(jìn)行介紹。
看完上述內(nèi)容，你們掌握如何理解JavaScript 事件循環(huán)中的微任務(wù)Microtask的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
分享題目：如何理解JavaScript事件循環(huán)中的微任務(wù)Microtask
文章轉(zhuǎn)載：http://fisionsoft.com.cn/article/jiedjd.html
