JavaScript 既通用又快速回應；了解如何使用非同步可以發揮其最佳效果。從取得 API 結果到載入文件，非同步開發允許我們同時執行多項操作，而不會發生阻塞。我們將探索在 JavaScript 中編寫非同步程式碼的三種不同方法：Promises、Async/Await 和 Callbacks - 了解何時使用以及如何實作每種方法。
為什麼要非同步 JavaScript？
想像一下，每次從 API 提取資料或等待下載大圖像檔案時，您的 Web 應用程式都會凍結。這不是最好的情況，對吧？這就是非同步 JavaScript 的用武之地。它可以讓您的程式在等待某些任務完成的同時繼續運行，從而實現更流暢的使用者體驗。
範例：基本回呼
函數 fetchData(回呼) {
setTimeout(() => {
console.log("資料已取得");
回調();
}, 2000);
}
函數processData() {
console.log("正在處理資料。");
}
fetchData(processData);
在此範例中，fetchData 等待兩秒鐘，然後在完成後呼叫 processData。這對於簡單的場景來說沒問題，但如果你開始堆疊多個回調，你可能會進入“回調地獄”，其中深度嵌套的回調使你的程式碼難以閱讀和維護。
提示：如果您發現自己有超過三個巢狀回調，請考慮切換到 Promises 或 Async/Await。
範例：使用 Promise
函數 fetchData() {
返回新的 Promise((解決, 拒絕) => {
setTimeout(() => {
solve("資料取得成功！");
}, 2000);
});
}
fetchData()
.then((訊息) => {
console.log(訊息);
return "正在處理資料。";
})
.then((processingMessage) => {
console.log(處理訊息);
})
.catch((錯誤) => {
console.error("錯誤:", 錯誤);
});
這裡，每個 .then() 都可以按順序處理任務，這比深度嵌套的回調更容易閱讀。 Promise 還可以更優雅地處理錯誤，並允許您使用 .catch() 在一個地方處理它們。
提示：當您需要依序執行多個任務，一個接一個，並完成前一個任務時，套用 Promise。
範例：非同步/等待
非同步函數 fetchData() {
嘗試{
const data = 等待新的 Promise((resolve) =>
setTimeout(() => resolve("資料取得成功！"), 2000);
});
console.log(數據);
const processMessage = await new Promise((resolve) => {
setTimeout(() => resolve("Processing data."), 1000);
});
console.log(processMessage);
} catch（錯誤）{
console.error("錯誤:", 錯誤);
}
}
fetchData();
使用 async 和 wait，您可以避免連結 .then() 調用，以便程式碼看起來與同步程式碼非常相似。這是一種極好的可讀性實踐，尤其是當涉及的操作很複雜時。
最佳實踐：它具有高度可讀性，因此始終是在現代 JavaScript 應用程式中隨時隨地使用 Async/Await 的最佳方法。
哪裡用哪一個
回呼：用於不複雜的小任務，可讀性不是問題。很少用於簡單的非同步調用。
承諾：它非常適合錯誤處理和順序流程。 Promise 可讓您避免使用深度嵌套的回呼來避免混亂的程式碼。
Async/Await：在按順序執行操作時，具有更好的可讀性和更清晰的程式碼。
掌握非同步 JavaScript 的最終技巧
嘗試每種方法：每種方法練習得越多，您就越能理解非同步程式設計並知道何時使用哪種方法。
謹慎處理錯誤：在 Promise 和 Async/Await 中，使用 .catch() 或 try.catch 進行錯誤處理。
效能最佳化：對於可以並行運行的任務，使用Promise.all來並行運行。
準備好深入研究了嗎？嘗試在您的專案中實施非同步技術，看看它們所帶來的差異。掌握非同步程式設計將使您的 JavaScript 技能更上一層樓，並幫助您建立流暢的響應式應用程式。
以上是掌握非同步 JavaScript：Promise、Async/Await 和回呼解釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！
