JavaScript 開發人員 Aysnc 和 Await 實用指南

介紹

Async 和 Await 是 ECMAScript 2017 (ES8) 中引入的 JavaScript 關鍵字，可以以更易讀、類似同步且易於管理的方式編寫非同步程式碼。它們簡化了需要時間才能完成的處理操作，例如從 API 取得資料。

在深入研究之前，我們先了解 JavaScript 中同步和非同步程式設計的概念。在同步編程中，任務會依照它們出現的順序一個接一個地順序執行。每項任務必須在下一項任務開始之前完成。另一方面，非同步程式允許任務在背景執行，使 JavaScript 能夠繼續執行其他任務，而無需等待前面的任務完成。

眾所周知，JavaScript 是一種單執行緒語言，這意味著它一次只能執行一個任務。如果是這樣的話，JavaScript 如何處理非同步程式碼呢？這是透過事件循環實現的，事件循環是與 JavaScript 運行時環境一起工作的關鍵機制。事件循環使非同步操作能夠在不阻塞主執行緒的情況下運行，從而確保 JavaScript 保持回應能力。事不宜遲，喝杯咖啡，我們就進入今天的正題吧！

什麼是異步？

為了更好地理解這個概念，我們將採取更實際的方法。在引入 async 和 wait 之前，Promise 是使用 ES6 (ECMAScript 2015) 中引入的「舊方式」處理的。讓我們探索下面的範例。

上面的程式碼示範了處理 Promise 的傳統語法。 Promise 建構函式用於建立一個新的 Promise 實例。它接受一個函數（稱為執行器函數）作為其參數，其中包括兩個參數：resolve 和reject。此執行器函數包含非同步操作的邏輯。在此範例中，會立即呼叫resolve，表示 Promise 已成功完成並具有特定值。一旦 Promise 被解析，.then 方法就會被觸發，執行它的回呼來記錄結果。

但是，這種語法可能有點難記住。 async/await 的引入簡化了處理 Promise 的過程，使其更容易閱讀和理解。讓我們看下面的例子。

為了實現非同步函數，我們使用 async 關鍵字，它告訴 JavaScript 這不是常規函數，而是一個非同步函數。第二個範例展示如何使用箭頭函數完成相同的操作。

另一個需要注意的重要概念是await 關鍵字。 async 和await 一起工作來簡化Promise 的處理。 wait 關鍵字只能在非同步函數內部使用，不能在函數外部或常規函數內部使用。它必須始終出現在標記為非同步的函數中。現在我們已經介紹了基礎知識，讓我們更深入地了解這個概念！

它是如何在幕後運作的

許多 JavaScript 開發人員在他們的程式碼中經常使用 async/await，但只有少數人真正了解它的幕後功能。這就是本教學的用武之地。讓我們探索一個範例來分解它。

在這個例子中，我們使用 .then 方法來更好地理解 Promise 與 async/await 方法相比是如何運作的。當呼叫handlePromise()函數時，程式碼會逐行執行。當 JavaScript 遇到 .then 方法時，它會將回呼註冊到微任務佇列並立即移動到下一行，列印「hello world」。

所有同步任務完成後，JavaScript 引擎會檢查微任務佇列中是否有待處理的任務。五秒後，setTimeout 完成，其回呼被推回呼叫堆疊。此時，Promise 已解決，註冊的回調將運行，記錄結果。

簡而言之，JavaScript 引擎不會等待，它直接移動到下一行程式碼。現在，使用 async/await 時是否適用相同的行為，或者它的工作方式是否不同？讓我們來了解一下吧！

在上面的範例中，當呼叫handlePromise()函數時，會列印第一行「the start」。然後 JavaScript 遇到了await關鍵字，它表明該函數是非同步的並且涉及到一個Promise。它表明由於 setTimeout，Promise 將需要五秒鐘才能解決。此時，handlePromise()函數被暫停（從呼叫堆疊中刪除），並且函數內await之後的任何程式碼都被暫停。

JavaScript 引擎繼續執行程式的其餘部分。五秒後，Promise 被解析，掛起的函數回到呼叫堆疊，handlePromise() 中的剩餘行'Promise issolved' 和 'the end' 依序執行。

要注意的是，掛起函數不會阻塞主執行緒。如果在handlePromise()函數之外編寫了其他程式碼，它將在Promise等待解析時執行。

下面的範例示範了此行為的實際效果：

在此範例中，第一個輸出是開始。當 JavaScript 遇到 wait 關鍵字時，它會辨識 Promise 需要 5 秒鐘才能解析。此時，函數被掛起，JavaScript 繼續執行函數外部的任何程式碼。結果，接下來列印的是我們在外面。

一旦 Promise 在五秒後被解析，handlePromise()函數就會恢復到呼叫堆疊，並執行其剩餘的行，列印 Promise 被解析，然後結束。

讓我們再看一個範例，我們將嘗試在其他範例中使用 async/await 進行 API 調用，以更好地理解這個概念。

在上面的程式碼中，執行過程遵循前面討論的相同原則。當 JavaScript 遇到 fetch 函數時，它會掛起 getData() 函數並等待 fetch 呼叫回傳回應對象，該物件包含回應的狀態、標頭和正文等各種屬性。一旦響應可用，該函數就會恢復執行。

回應正文是我們需要的數據，但它是原始形式（例如文字或二進位）並且不能立即使用。為了將其轉換為 JavaScript 物件以便於操作，我們使用 .json() 方法來解析原始 JSON 回應。這個過程涉及到另一個Promise，這就是為什麼需要第二次await。函數再次掛起，直到 Promise 解決。

一旦兩個 Promise 都滿足，getData() 函數就會恢復，解析後的資料會印到控制台。這是解釋 fetch 工作原理的簡單方法，不是嗎？現在，回到我們的主要討論！如果我們的 API 回應失敗怎麼辦？我們如何使用 async/await 來管理錯誤？讓我們在下一節中深入探討這一點。

使用 Async/Await 處理錯誤

傳統上，Promise 中的錯誤是使用 .catch 方法處理的。但是使用 async/await 時我們如何處理錯誤呢？這就是 try...catch 區塊發揮作用的地方。

在上面的程式碼中，Promise 包含在 try 區塊中，如果 Promise 成功解析，該區塊就會執行。但是，如果 Promise 被拒絕，則會在 catch 區塊中捕獲並處理錯誤。

但是您知道我們仍然可以用傳統方式處理錯誤嗎？這是一個例子：

若要使用傳統方法處理 async/await 中的錯誤，只需將 catch 方法附加到函數，如上所示。它的功能與 try/catch 區塊相同。

結論

Async/await 徹底改變了 JavaScript 處理非同步操作的方式，與 .then 和 .catch 等傳統方法相比，使程式碼更具可讀性且更易於管理。透過利用 async 和 wait，我們可以編寫感覺更加同步的非同步程式碼，從而提高整體程式碼的清晰度。在了解內部運作原理（例如事件循環和微任務佇列）的同時，實作 async/await 對於現代 JavaScript 開發來說是簡單且有效率的。透過使用 try/catch 或 .catch 進行正確的錯誤處理，我們可以自信地管理成功和失敗的 Promise。

感謝您的堅持！我希望這篇文章能讓您對 async/await 更加清楚。祝您在程式設計冒險中取得成功—去建立一些令人驚奇的東西！

以上是JavaScript 開發人員 Aysnc 和 Await 實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！