JavaScript 中的非同步程式設計

JavaScript 作為一種單執行緒語言，一次只能處理一個任務。這可能會導致複雜任務的等待時間過長，因為腳本將被阻止執行任何其他任務，直到完成為止。為了解決這個問題，JavaScript 提供了非同步編程，它允許腳本在等待非同步任務完成的同時繼續執行其他任務。在本部落格中，我們將探討 JavaScript 非同步程式設計的基礎知識，以及如何透過使用回呼函數、Promise 和 async/await 來實現非同步程式設計。

回呼函數

回呼函數是作為參數傳遞給另一個函數並在主函數完成後執行的函數。回調在非同步程式設計中用於等待任務完成後再執行下一步。

例如，考慮以下程式碼：

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

在此範例中，slowTask 函數採用回呼作為參數。 SlowTask 函數使用 setTimeout 將任務的執行延遲一秒鐘。 runProgram 函數呼叫 SlowTask 並傳遞回呼函數作為參數。 runProgram 函數也會記錄「程式開始」和「程式結束」。當slowTask函數完成時，它會記錄「慢任務完成」並執行回調函數，該函數會記錄「回呼函數已執行」。
輸出將是：

Program started.
Program ended.
Slow task completed.
Callback function executed.

承諾

Promise 是 JavaScript 中非同步程式設計的一種更現代的方法。 Promise 表示非同步操作的結果，可以處於三種狀態之一：掛起、已完成或已拒絕。可以使用 Promise 建構函數建立 Promise，並且可以使用 then 和 catch 方法確定其狀態。

例如：

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

在此範例中，slowTask 是一個在一秒後解析的 Promise，結果為「慢速任務完成」。 runProgram 函數呼叫 SlowTask 並使用 then 方法在 Promise 完成時記錄結果。

The output will be:
Program started.
Program ended.
Slow task completed.

異步/等待

Async/await 是 JavaScript 中處理非同步操作的最新且最易讀的方式。它允許開發人員編寫看起來像同步程式碼的非同步程式碼，使其更易於理解和維護。 async 關鍵字用於聲明非同步函數，await 關鍵字用於等待 Promise 被解析。

以下是示範 JavaScript 中 async/await 用法的範例：

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();

在此範例中，使用 async 關鍵字將 fetchData 函數宣告為非同步函數。此函數使用 fetch 從 API 檢索數據，await 用於等待 fetch 作業完成。然後使用response.json()將解析後的回應轉換為JSON物件。 await 關鍵字用於等待 JSON 轉換完成，並將最終結果記錄到控制台。

需要注意的是，非同步函數內的程式碼將非同步執行，但函數外的程式碼仍將同步執行。另外，await 關鍵字只能在非同步函數中使用。

總之，JavaScript 中的非同步程式設計允許腳本在等待非同步任務完成時繼續執行其他任務。回呼函數、Promise 和 async/await 是 JavaScript 中實作非同步程式設計的三種方法。回呼函數是處理非同步操作最簡單、最基本的方法，而 Promise 提供了更現代、更靈活的方法。 Async/await 提供了最容易閱讀的方式來處理非同步操作，是現代 JavaScript 程式設計的推薦方法。了解 JavaScript 中的非同步程式設計對於創建高效且響應迅速的應用程式非常重要，並且是任何 JavaScript 開發人員的必備技能。

以上是JavaScript 中的非同步程式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章！