了解 JavaScript 中的 async 和 wait：簡潔非同步程式碼的關鍵

JavaScript 的非同步特性是其最大的優勢之一，但它也可能成為開發人員沮喪的根源。隨著時間的推移，我們已經從回調函數（以及可怕的“回調地獄”）轉向承諾，現在轉向非同步和等待。這些現代工具簡化了非同步編程，使您的程式碼更具可讀性、可維護性和高效性。

但是 async 和 wait 到底如何運作，為什麼它們如此有用？讓我們深入探索吧！

什麼是非同步和等待？
在 JavaScript 中，async 和 wait 是 ES2017 (ES8) 的一部分，提供了以更同步的方式處理非同步操作的方法。它們建立在 Promise 之上，讓您可以編寫更清晰、更易讀的程式碼。

• async：將函數宣告為非同步可確保它總是回傳一個 Promise，即使您沒有明確傳回一個

• await：此關鍵字在非同步函數內使用，用於暫停函數的執行，直到承諾解決或拒絕。它使非同步程式碼看起來是同步的。

它們如何運作？
讓我們看一些範例來了解它們是如何運作的。

非同步 函數範例

這裡，async 關鍵字會自動將回傳值包裝在 Promise 中。因此，呼叫 sayHello() 將傳回一個解析為 「Hello, World!」

的承諾

在 async 函數中使用 await
await 關鍵字暫停函數的執行，直到承諾解決或拒絕。

如果沒有 await，您需要連結 .then() 調用，這會使程式碼更難閱讀。

是否 等待 阻止執行？
如果 await 確實會阻塞執行，那麼它與傳統的同步 JavaScript 有何不同？使用它的實際好處是什麼？

這裡出現了一些混亂：await 不會阻塞主線程。它只會暫停目前非同步函數的執行，而程式的其他部分繼續運作。

類比：
想像一下你正在煮飯：

• 同步：你必須站在爐子旁邊不斷地攪拌鍋，直到食物煮熟。在那段時間你不能做任何其他事情。

• 非同步/等待：你將食物放入烤箱（等待它會被煮熟的 Promise）。然後，您可以在等待時做其他事情（切蔬菜、擺桌子）。當計時器響起時（承諾解決），您回到烤箱並取出食物。

範例：

輸出：

請注意，「End」記錄在「Data fetched」之前。這表明，雖然 await 暫停 fetchData 函數，但它不會阻塞程式的其餘部分。

結論
async 和 await 是強大的工具，可以改變我們在 JavaScript 中編寫非同步程式碼的方式。透過使非同步工作流程看起來同步，它們提高了可讀性，簡化了錯誤處理，並為您提供了對順序和並行操作的精確控制 - 所有這些都不會阻塞主執行緒。

以上是了解 JavaScript 中的 async 和 wait：簡潔非同步程式碼的關鍵的詳細內容。更多資訊請關注PHP中文網其他相關文章！