非同步 JavaScript：Promise、Async/Await 和回調

原發佈於Makemychance.com

非同步程式設計是 JavaScript 中的核心概念，它允許您在不阻塞其他程式碼執行的情況下執行任務。當處理需要時間才能完成的操作（例如網路請求、檔案 I/O 或計時器）時，這一點變得尤其重要。在本文中，我們將探討 JavaScript 中處理非同步程式碼的三種主要技術：回呼、Promises 和 Async/Await。

1. 回調

回呼是 JavaScript 中處理非同步操作的最古老的方式。回調只是一個作為參數傳遞給另一個函數的函數，然後在任務完成後執行。

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

fetchData((message) => {
  console.log(message);
});

在上面的範例中，fetchData 透過 setTimeout 模擬網路請求，回呼函數在請求完成後記錄訊息。

回調地獄

使用回調的缺點之一是臭名昭著的“回調地獄”或“厄運金字塔”，其中多個嵌套回調使程式碼難以閱讀和維護。

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. 承諾

ES6 中引入的 Promise 提供了一種更簡潔的方法來處理非同步任務，有助於克服深度嵌套回調的挑戰。本質上，promise 是一個對象，它像徵著非同步操作的結果，無論它成功完成還是失敗，並且它提供了一種結構化的方式來處理結果值。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

在此範例中，fetchData 傳回一個承諾。 .then() 方法用於處理 Promise 的解析值，.catch() 方法用於處理任何錯誤。

連結承諾

Promise 可以連結起來，使程式碼更具可讀性和可維護性。

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. 異步/等待

ES8 (2017) 中引入的 Async/Await 是一種建構在 Promise 之上的語法糖，使非同步程式碼的外觀和行為更像同步程式碼。

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

在此範例中，processData 函數使用await 關鍵字等待fetchData 傳回的promise 得到解析。與 Promise 鏈相比，這使得程式碼更乾淨、更容易遵循。

錯誤處理

async/await 中的錯誤處理是使用 try...catch 區塊完成的，提供了一種直接的方法來處理錯誤，而不需要 .catch() 方法。

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

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