您好,登錄后才能下訂單哦!
這篇文章給大家介紹js的async和await該怎么理解,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
一:概述
js異步的發展經歷了回調,事件,Promise,生成器,async+await,總的來說是進化了很多版本,js是單線程的,為了支持異步引入的事件循環,里面還挺深的,最近剛好遇到一個js的問題,寫了一個測試,記錄一下。
首先,我們使用 async 關鍵字,把它放在函數聲明之前,使其成為 async function。異步函數是一個知道怎樣使用 await 關鍵字調用異步代碼的函數。
await 只在異步函數里面才起作用。它可以放在任何異步的,基于 promise 的函數之前。它會暫停代碼在該行上,直到 promise 完成,然后返回結果值。在暫停的同時,其他正在等待執行的代碼就有機會執行了。上面是 MDN 上面定義的,看著有點懵,來段代碼試一下。
二:調試
// 這個sleep返回一個Promise對象
const sleep = function (time) {
console.log(Date.parse(new Date()))
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('ok');
}, time);
})
};
// 這個是同步執行的代碼
function sleep_sync(numberMillis) {
let now = new Date();
const exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
// 用async修改的代碼
async function test() {
console.log("call test")
console.log("同步執行5s開始")
sleep_sync(5000)
console.log("同步執行5s結束")
console.log("異步執行10秒開始")
await sleep(10000)
console.log("異步執行10秒結束")
console.log("異步執行5秒開始")
await sleep(5000)
console.log("異步執行5秒結束")
console.log("將要執行return")
return "hello test"
}
// 調用async函數
result_test = test()
console.log(“主進程邏輯")
result_test.then((r) => console.log(r))
console.log("主進程邏輯1")
執行結果
call test同步執行5s開始------------- 執行了5s-------------同步執行5s結束異步執行10秒開始1595845827000主進程邏輯主進程邏輯1------------- 執行了大概10s-------------異步執行10秒結束異步執行5秒開始1595846947000-------------- 執行了5s--------------異步執行5秒結束將要執行returnhello test
分析一下(有錯誤的歡迎留言):
執行的第一行代碼
result_test = test()
調用 test 函數,進入 test 函數,test是由 async修飾的,在這個函數里代碼分為2類,同步代碼和異步代碼,同步代碼是不管 async 關鍵字的,肯定得執行,所以 sleep_sync 同步執行了 5s ,包括console.log都是同步代碼。對應上面輸出
完后緊接著是下面的代碼
await sleep(10000)
先看sleep函數,先打印當前時間,完后創建Promise對象,Promise對象創建完后會立馬執行的,完后await 和 return 都會造成 async 修飾的函數返回,所以就到了主進程了。當主進程打印完 ”主進程邏輯1“ 就沒有代碼可執行了。
接下來就到了 ”異步執行10秒結束“ 這個時間不一定是 10s,js是單線程的要是進程阻塞嚴重的話可能會大于 10s。
在 async 里面,await都是串行執行的,說以就執行完 10s 那個開始執行 5s 那個,完后再 return。
async函數返回的值都是 Promise,所以可以通過 then 獲取到值。
關于js的async和await該怎么理解就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。