回調、Promises 與 Async/Await：詳細比較

簡介：
非同步程式設計是現代 JavaScript 開發的基石，使任務能夠並發執行而不會阻塞主執行緒。隨著時間的推移，JavaScript 已經發展出更優雅的解決方案來處理非同步操作。在本文中，我們將探討非同步 JavaScript 的演變，從傳統的回呼開始，逐步發展到 Promise 和 async/await 語法。

1. 回呼函數： 傳統上，JavaScript 使用回呼函數來處理非同步操作。回調可讓您定義非同步任務完成後要執行的函數。然而，隨著程式碼庫變得越來越大、越來越複雜，基於回調的方法導致了諸如回調地獄和程式碼可讀性差等問題。

範例：

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

輸出：
運行程式碼時，輸出將是：

kishan
Anuj
jatin

步驟 2

Promise 比回呼更好地處理非同步操作，因為它們提供了一種更乾淨、更易於管理且防錯的非同步程式碼處理方式。這就是為什麼 Promise 被認為更好的原因：

1. 避免回調地獄 回呼：嵌套多個回調會導致程式碼嵌套很深且難以閱讀（俗稱「回呼地獄」）。 Promise：Promise 鏈 .then() 調用，保持程式碼平坦且可讀

1. 錯誤處理
   回調：每個等級都必須明確處理錯誤，容易出錯。
   承諾：使用 .catch()，您可以在一處處理錯誤

2. 更好的可讀性
   Promise 使用 .then() 和 .catch() 具有清晰的結構，使程式碼更易於理解、調試和維護。

3. 連結多個非同步呼叫
   Promise 讓連結順序非同步操作無縫

範例

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

// Usage with an Additional Task
createdData({ name: "jatin", profession: "software Engineer" })
  .then(getDatas)
  .then(logCompletion) // New Task
  .catch((err) => console.error(err));

工作原理：
建立資料：
2 秒後向 datas 陣列新增新的資料條目。
取得數據：
1 秒後記錄資料數組中的所有名稱。
logCompletion（新任務）：
日誌「所有任務已完成！」500 毫秒後。

輸出：
當您執行更新的程式碼時，輸出將為：

kishan
Anuj
jatin
All tasks completed!

為什麼 Promise 讓這一切變得如此簡單：
每個任務都會傳回一個 Promise，讓您能夠輕鬆新增、重新排列或刪除鏈中的步驟。
簡潔的結構確保順序得以維持且易於遵循。

步驟 3

使用 async/await 簡化了 Promises 的語法，使程式碼更具可讀性，更接近同步流程，同時仍然是非同步的。這是使用 async/await 重寫時程式碼的外觀：

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

非同步/等待的好處：
可讀性：
程式碼讀起來就像是同步、逐步的邏輯。
沒有連結或嵌套。
錯誤處理：
使用 try...catch 區塊來實現集中且一致的錯誤處理機制。
可擴充性：
新增任務就像新增另一個等待行一樣簡單。

輸出：
運行程式碼時，您將得到：

kishan
Anuj
jatin

以上是回調、Promises 與 Async/Await：詳細比較的詳細內容。更多資訊請關注PHP中文網其他相關文章！