掌握非同步 JavaScript：回呼、Promise 和 Async/Await

非同步 JavaScript

非同步 JavaScript 允許獨立於主執行緒執行任務，確保應用程式保持回應靈敏且有效率。這對於處理 API 呼叫、檔案讀取或延遲等操作尤其重要。

---

1.同步與非同步程式碼

同步程式碼：

• 依序逐行執行。
• 阻止後續操作，直到目前操作完成。

例子：

console.log("Start");
console.log("End");
// Output:
// Start
// End

非同步程式碼：

• 允許在等待任務完成時繼續其他操作。
• 使用回呼、promise 或 async/await 來處理結果。

例子：

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

---

2.非同步程式設計方法

a.回呼

回呼是作為參數傳遞給另一個函數的函數，在非同步任務完成後執行。

範例：

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});

缺點：

• 連結多個非同步操作時會導致「回調地獄」。

b.承諾

Promise 代表一個可能現在、未來或永遠無法使用的值。

承諾狀態：

• 待處理：初始狀態。
• 已完成：成功完成。
• 拒絕：失敗。

建立一個 Promise:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});

處理錯誤:

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

c.非同步/等待

async 和await 為使用promise 提供了更易讀的語法。

範例：

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

錯誤處理:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

---

3.非同步用例

a.使用 Fetch 進行 API 呼叫

fetch API 是一種發出 HTTP 請求的現代方式。

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

b.事件監聽器

事件處理中的異步行為。

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

c.計時器

使用 setTimeout 和 setInterval 來延遲。

setTimeout(() => console.log("Timeout executed!"), 2000);

---

4.事件循環

事件循環是 JavaScript 中管理非同步操作的機制。任務按以下順序排隊並執行：

1. 呼叫堆疊：執行同步程式碼。
2. 任務佇列：執行非同步回呼（例如，setTimeout）。
3. 微任務隊列：執行承諾決議。

範例：

console.log("Start");
console.log("End");
// Output:
// Start
// End

---

5.常見陷阱

1. 忘記處理錯誤:

   • 始終使用 .catch() 或 try/catch 來實現承諾。

2. 阻塞主執行緒:

   • 避免長時間運行的同步任務。

3. 回調地獄:

   • 使用 Promise 或 async/await 來代替。

---

6.總結

Technique	Description
Callbacks	Functions executed after async tasks.
Promises	Chained mechanism for async tasks.
Async/Await	Cleaner syntax for handling promises.

理解並利用 JavaScript 中的非同步程式設計對於創建響應迅速且高效的 Web 應用程式至關重要。透過掌握回調、Promise 和 async/await，開發人員可以有效地管理非同步任務。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是掌握非同步 JavaScript：回呼、Promise 和 Async/Await的詳細內容。更多資訊請關注PHP中文網其他相關文章！