Dev

說明 Promise 的錯誤處理機制：透過 `[[RejectReactions]]` 與 `.catch()` 統一管理失敗情境。並介紹 2022 年新增的 `AbortSignal.timeout()`，示範如何為 `fetch` 加上超時自動中止的能力。最後整理 Microtask Queue、Callback Queue 與 Event Loop 的完整執行規則。

JavaScript Hard Parts v3

#JavaScript #Promise #frontendMasters #javaScriptTheHardPartsV3

2026-05-1712 分鐘閱讀

Microtask Queue：Promise 回呼的優先執行機制

說明 JavaScript 非同步系統中存在兩個佇列：Callback Queue 與 Microtask Queue。透過同時混用 `setTimeout` 與 `fetch` 的程式碼，逐步追蹤執行時間軸，說明 Event Loop 為何永遠優先清空 Microtask Queue，以及這個規則如何決定最終的輸出順序。

JavaScript Hard Parts v3

#JavaScript #MicrotaskQueue #frontendMasters #javaScriptTheHardPartsV3

2026-05-1712 分鐘閱讀

當 Callback Queue 遇上 Promise：執行順序追蹤

逐步追蹤同時包含 `setTimeout` 與 `fetch` 的程式碼執行流程，說明 Callback Queue 與 Promise 回呼機制如何在同一段程式碼中並行運作，並以此引出一個關鍵問題：當兩者同時就緒，究竟誰先執行？

JavaScript Hard Parts v3

#JavaScript #Promise #frontendMasters #javaScriptTheHardPartsV3

2026-05-1612 分鐘閱讀

Promise 的運作機制：物件持久性、記憶體參照

說明 `fetch` 建立的 Promise 物件如何跨越 JavaScript 引擎與瀏覽器兩個環境：瀏覽器的網路請求持有指向 Promise 物件的記憶體參照，背景工作完成時透過這個參照直接更新 `[[Result]]`。同時說明 Promise 物件為何不會在局部執行環境退出後消失，以及為何 Promise 回呼使用的不是 Callback Queue，而是優先權更高的 Microtask Queue。

JavaScript Hard Parts v3

#JavaScript #Promise #frontendMasters #javaScriptTheHardPartsV3

2026-05-1613 分鐘閱讀

ES6 Promises 與 fetch

說明 `fetch` 作為雙管齊下的幻象函式的運作方式：呼叫當下同時在瀏覽器背景發出 HTTP 請求，並立刻在 JavaScript 中回傳 Promise 物件。介紹 Promise 的 `[[Result]]` 與 `[[FulfillReactions]]` 兩個隱藏屬性，以及 `.then()` 的作用，並逐步追蹤從發出請求到資料回傳的完整執行流程。

JavaScript Hard Parts v3

#JavaScript #Promise #frontendMasters #javaScriptTheHardPartsV3

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15