首頁 > web前端 > js教程 > 主體

非同步編程回調、Promise 和非同步等待

WBOY
發布: 2024-09-11 06:43:02
原創
1080 人瀏覽過

Asynchronous programming Callbacks, Promises & Async Await

JavaScript 中的非同步程式設計可讓您執行 API 呼叫、讀取檔案或查詢資料庫等任務,而不會阻塞其他程式碼的執行。這在 JavaScript 中至關重要,尤其是在 Web 開發中,回應能力和效能是關鍵。

關鍵概念

1。回調:

作為參數傳遞給另一個函數的函數,該函數在非同步操作完成後執行。

範例:

函數 fetchData(回呼) {
setTimeout(() => {
callback("資料已取得");
}, 1000);
}

fetchData((data) => {
console.log(數據);
});

2。承諾:

表示非同步操作最終完成或失敗的物件。

承諾可以處於三種狀態之一:待定、已履行或已拒絕。

範例:

讓promise = new Promise((resolve,reject) => {
setTimeout(() => {
解析(“數據已獲取”);
}, 1000);
});

承諾
.then((data) => console.log(data))
.catch((錯誤) => console.log(錯誤));

3。非同步與等待:

非同步函數會自動傳回一個 Promise,並用於簡化 Promise 的處理。

await 暫停非同步函數的執行,直到 Promise 得到解決,使程式碼更易於閱讀和編寫。

範例:

非同步函數 fetchData() {
嘗試{
讓資料 = 等待新的 Promise((解決, 拒絕) => {
setTimeout(() => {
解析(“數據已獲取”);
}, 1000);
});
console.log(數據);
} catch (錯誤) {
console.log(錯誤);
}
}

fetchData();

非同步模式

回呼地獄:回呼嵌套在其他回調中的情況,使程式碼難以閱讀和維護。

Promise Chaining:一種透過返回 Promise 並連結 .then() 和 .catch() 方法來避免回調地獄的模式。

Async/Await:一種更現代、更簡潔的非同步程式碼編寫方法,可以避免 Promise 鏈並使程式碼看起來更同步。

用例

API 呼叫:從伺服器取得資料。

計時器:使用 setTimeout 或 setInterval。

檔案操作:以非阻塞方式讀取或寫入檔案。

事件處理:處理點擊、按鍵等事件

JavaScript 中的非同步程式設計對於建立響應迅速、高效的應用程式至關重要,特別是在處理 I/O 密集型操作時。

以上是非同步編程回調、Promise 和非同步等待的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板