JavaScript 中的非同步程式設計

WBOY
發布: 2024-08-11 06:50:07
原創
798 人瀏覽過

Asynchronous programming in Javascript

JavaScript 作為一種單執行緒語言,一次只能處理一個任務。這可能會導致複雜任務的等待時間過長,因為腳本將被阻止執行任何其他任務,直到完成為止。為了解決這個問題,JavaScript 提供了非同步編程,它允許腳本在等待非同步任務完成的同時繼續執行其他任務。在這篇部落格中,我們將探索 JavaScript 非同步程式設計的基礎知識,以及如何透過使用回調函數、Promise 和 async/await 來實現非同步程式設計。

回呼函數

回呼函數是作為參數傳遞給另一個函數並在主函數完成後執行的函數。回調用於非同步編程,以等待任務完成後再執行下一步。

例如,考慮以下程式碼:

雷雷

在此範例中,slowTask 函數採用回呼作為參數。 SlowTask 函數使用 setTimeout 將任務的執行延遲一秒鐘。 runProgram 函數呼叫 SlowTask 並傳遞回呼函數作為參數。 runProgram 函數也會記錄「程式開始」和「程式結束」。當slowTask函數完成時,它會記錄「慢速任務完成」並執行回調函數,該函數會記錄「回呼函數已執行」。
輸出將是:

雷雷

承諾

Promise 是 JavaScript 中非同步程式設計的一種更現代的方法。 Promise 表示非同步操作的結果,可以處於以下三種狀態之一:掛起、已完成或已拒絕。可以使用 Promise 建構函數建立 Promise,並且可以使用 then 和 catch 方法確定其狀態。

例如:

雷雷

在此範例中,slowTask 是一個在一秒後解析的 Promise,結果為「慢任務完成」。 runProgram 函數呼叫 SlowTask 並使用 then 方法在 Promise 完成時記錄結果。

雷雷

異步/等待

Async/await 是 JavaScript 中處理非同步操作的最新且最易讀的方式。它允許開發人員編寫看起來像同步程式碼的非同步程式碼,使其更易於理解和維護。 async 關鍵字用於聲明非同步函數,await 關鍵字用於等待 Promise 被解析。

這裡有一個範例來示範 JavaScript 中 async/await 的使用:

雷雷

在此範例中,使用 async 關鍵字將 fetchData 函數宣告為非同步函數。此函數使用 fetch 從 API 檢索數據,await 用於等待 fetch 作業完成。然後使用response.json()將解析後的回應轉換為JSON物件。 wait關鍵字用於等待JSON轉換完成,並將最終結果記錄到控制台。

需要注意的是,非同步函數內的程式碼會非同步執行,但函數外的程式碼仍會同步執行。另外,await 關鍵字只能在非同步函數中使用。

總之,JavaScript 中的非同步程式設計允許腳本在等待非同步任務完成的同時繼續執行其他任務。回呼函數、Promise 和 async/await 是 JavaScript 中實作非同步程式設計的三種方法。回呼函數是處理非同步操作最簡單、最基本的方法,而 Promise 提供了更現代、更靈活的方法。 Async/await 提供了最容易閱讀的方式來處理非同步操作,是現代 JavaScript 程式設計的推薦方法。了解 JavaScript 中的非同步程式設計對於創建高效且響應迅速的應用程式非常重要,並且是任何 JavaScript 開發人員的必備技能。

以上是JavaScript 中的非同步程式設計的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!