了解非同步操作並在 JavaScript 中使用 async/await

如您所知，JavaScript 是一種單執行緒語言，它一次只能執行一個操作。然而，Web 開發中的許多操作（包括從伺服器提取資料或讀取磁碟中的檔案）可能需要一些時間才能完成。如果它確實同步執行這些操作，這意味著 JavaScript 必須等到操作完成才能轉到下一行程式碼，那麼它將降低應用程式的回應速度。為了更有效率地完成此類任務，JavaScript 採用了非同步程式設計技術。

什麼是異步操作？

非同步操作是在目前時間啟動但允許在其他時間完成而程式繼續執行其他程式碼行的操作。在 JavaScript 中，異步行為的處理是透過使用回呼、promise 以及後來的 async/await 語法來完成的。這種方法使 JavaScript 在背景執行任務，從而提高 Web 應用程式的整體效能。
例如，考慮在 Web 應用程式中必須從資料庫檢索有關使用者的資訊的情況。此過程可能需要幾秒鐘，具體取決於網路速度或伺服器的高流量。 JavaScript 可以繼續執行其餘程式碼，而不是在等待接收資料時停止應用程式。這種非阻塞行為是非同步程式設計背後的基本思想。

引入異步/等待

async/await 語法是 ES2017 (ES8) 的一部分，可以說是處理非同步程式碼的最優雅且易於理解的方法。它基於 Promises，並提供了一種將非同步程式碼看起來像同步程式碼的方法，以便於理解和維護。
非同步函數是以 Promise 作為傳回類型的函數。 async 關鍵字附加到函數時告訴程式該函數將始終傳回 Promise，無論是否實際傳回 Promise。 Await 用於非同步函數內部，以允許函數等待 Promise 完成或拒絕。

async/await 如何運作？

現在讓我用一個例子來說明如何使用 async/await。考慮以下程式碼片段，該程式碼片段會擷取使用者的購物車並顯示它：

在這個例子中，getCart函數被宣告為async，因此，它可以使用await關鍵字來處理其中的非同步操作。

1. const cart = wait req.user.getCart();：這會呼叫使用者物件上的 getCart 方法，檢索使用者目前的購物車實例。 await 關鍵字確保 JavaScript 等待 getCart() 傳回的 Promise 完成。然後將解析後的值（使用者的購物車）指派給 cart 變數。
2. const products = wait cart.getProducts();：同樣，此行會暫停程式碼的執行，直到 getProducts 方法完成，這會將產品新增至使用者的購物車。 wait 關鍵字告訴 CLR 在產品資料準備好之前不應執行下列程式碼行。
3. 渲染回應：完成兩個非同步操作後，執行變數 res.render() 以在產品旁邊渲染購物車頁面。
4. try...catch 的錯誤處理：try...Finally，catch 區塊用於處理由於非同步操作可能出現的任何異常。如果任何一個await語句出現錯誤，catch區塊就會處理該錯誤並將其記錄到控制台。

使用 async/await 的好處

與傳統的基於 Promise 的程式碼相比，async/await 語法具有多種優勢：與傳統的基於 Promise 的程式碼相比，async/await 語法具有多種優勢：
• 提高可讀性：很容易理解和理解，因為儘管它能夠處理非同步操作，但程式碼看起來像普通的同步程式碼。
• 錯誤處理：使用 try...Async/await 讓錯誤處理像使用sync/async 擷取錯誤一樣簡單且統一。
• 簡化複雜操作：對於有多個非同步操作的程式碼應該使用async/await，因為這樣程式碼會更容易編寫、測試和偵錯。

結論

非同期プログラミングは、JavaScript において、メインスレッドを停止させることなく計算量の多い操作を実行するために特に重要です。 async/await 構文は、これらの操作を処理するためのより洗練された方法を提供し、生成されるコードはより読みやすく、よりクリーンで、デバッグが容易になります。 Async/await は、開発者が非同期コードを作成するのに役立ち、アプリケーションをより予測可能かつ高速にします。

以上是了解非同步操作並在 JavaScript 中使用 async/await的詳細內容。更多資訊請關注PHP中文網其他相關文章！