掌握 JavaScript Promise：每個開發人員都必須知道的棘手輸出問題！ （第 1 部分）

JavaScript Promise 是現代 Web 開發的重要組成部分。它們使我們能夠乾淨有效地處理非同步操作。然而，promise 的表現往往令人驚訝，尤其是與事件循環和微任務結合使用時。本文是由兩部分組成的系列文章的第 1 部分，我們將解決基於 Promise 的棘手輸出問題，以提高您的 JavaScript 技能。

在本系列結束時，您將更深入地了解 Promise 如何與 JavaScript 事件循環互動。讓我們深入探討前五個棘手問題！

---

問題 1：基本 Promise 解析

console.log("Start");

const promise1 = new Promise((resolve) => {
  console.log("Promise started");
  resolve("Resolved");
});

promise1.then((result) => {
  console.log(result);
});

console.log("End");

輸出：

Start
Promise started
End
Resolved

說明：

1. 第一個console.log("Start")被執行。
2. Promise 執行器立即運行，並開始記錄 Promise。
3. .then() 區塊在目前程式碼執行完成後被排程為微任務。
4. 接下來執行 console.log("End")。
5. 最後，.then() 回呼日誌在處理微任務佇列時解決。

---

問題 2：巢狀 Promise

const promise2 = new Promise((resolve) => {
  resolve("Resolved 1");
});

promise2.then((result) => {
  console.log(result);
  return new Promise((resolve) => {
    resolve("Resolved 2");
  });
}).then((result) => {
  console.log(result);
});

輸出：

Resolved 1
Resolved 2

說明：

1. 第一個 .then() 記錄 Resolved 1 並傳回一個新的 Promise。
2. 第二個 .then() 等待回傳的 Promise 解決，記錄 Resolved 2。

---

問題 3：立即解決的連鎖承諾

const promise3 = Promise.resolve();

promise3
  .then(() => {
    console.log("Then 1");
  })
  .then(() => {
    console.log("Then 2");
  })
  .then(() => {
    console.log("Then 3");
  });

輸出：

Then 1
Then 2
Then 3

說明：

1. 當一個 Promise 立即被解析 (Promise.resolve()) 時，它的 .then() 處理程序會在微任務佇列中排隊。
2. 每個 .then() 傳回一個新的 Promise，該 Promise 在其回調運行後解析，從而導致 Then 1、Then 2 和 Then 3 的順序執行。

---

問題4：拒絕處理

const promise4 = new Promise((_, reject) => {
  reject("Error occurred");
});

promise4
  .then(() => {
    console.log("This will not run");
  })
  .catch((error) => {
    console.log("Caught:", error);
  })
  .then(() => {
    console.log("This will still run");
  });

輸出：

Caught: Error occurred
This will still run

說明：

1. 承諾被拒絕，並顯示訊息「發生錯誤」。
2. .catch() 區塊捕獲錯誤並記錄 Caught：發生錯誤。
3. 在 .catch() 之後，下一個 .then() 仍然會運行，因為它被視為已解決的 Promise，除非 catch 再次拋出。

---

問題 5：將 Async/Await 與 Promise 混合

async function asyncFunc() {
  console.log("Async function started");
  return "Async result";
}

asyncFunc().then((result) => {
  console.log(result);
});

console.log("Synchronous log");

輸出：

Async function started
Synchronous log
Async result

說明：

1. 當 asyncFunc 被呼叫時，它會立即記錄 Async 函數已啟動。
2. 非同步函數的回傳值是一個承諾，因此 .then() 被安排為微任務。
3. 接下來執行 console.log("Synchronous log")，然後是記錄非同步結果的 Promise 的解析。

---

結論：

在第一部分中，我們介紹了 JavaScript Promise 的基礎知識，並探討了 Promise 解析、連結和拒絕處理的工作原理。了解事件循環和微任務佇列對於掌握 Promise 至關重要，這些問題強調了這一點。請繼續關注第 2 部分，我們將深入探討更進階的 Promise 行為，包括 Promise.race、Promise.all 等等！

重點：

• Promise 解析總是非同步的，.then() 處理程序在目前同步程式碼之後處理。
• 每個 .then() 傳回一個新的 Promise，允許連結。
• catch() 處理 Promise 拒絕，後續的 .then() 呼叫仍將被執行。

請繼續關注本系列的第 2 部分，我們將在其中解決更高級的 Promise 技巧！

以上是掌握 JavaScript Promise：每個開發人員都必須知道的棘手輸出問題！ （第 1 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！