js的async和await該怎么理解

這篇文章給大家介紹js的async和await該怎么理解，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

一：概述

        js異步的發(fā)展經(jīng)歷了回調(diào)，事件，Promise，生成器，async+await，總的來說是進(jìn)化了很多版本，js是單線程的，為了支持異步引入的事件循環(huán)，里面還挺深的，最近剛好遇到一個js的問題，寫了一個測試，記錄一下。

       首先，我們使用 async 關(guān)鍵字，把它放在函數(shù)聲明之前，使其成為 async function。異步函數(shù)是一個知道怎樣使用 await 關(guān)鍵字調(diào)用異步代碼的函數(shù)。

       await 只在異步函數(shù)里面才起作用。它可以放在任何異步的，基于 promise 的函數(shù)之前。它會暫停代碼在該行上，直到 promise 完成，然后返回結(jié)果值。在暫停的同時，其他正在等待執(zhí)行的代碼就有機(jī)會執(zhí)行了。上面是 MDN 上面定義的，看著有點(diǎn)懵，來段代碼試一下。

二：調(diào)試

// 這個sleep返回一個Promise對象const sleep = function (time) {    console.log(Date.parse(new Date()))    return new Promise(function (resolve, reject) {        setTimeout(function () {            resolve('ok');
        }, time);    })};// 這個是同步執(zhí)行的代碼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("同步執(zhí)行5s開始")    sleep_sync(5000)    console.log("同步執(zhí)行5s結(jié)束")    console.log("異步執(zhí)行10秒開始")    await sleep(10000)    console.log("異步執(zhí)行10秒結(jié)束")    console.log("異步執(zhí)行5秒開始")    await sleep(5000)    console.log("異步執(zhí)行5秒結(jié)束")    console.log("將要執(zhí)行return")    return "hello test"}// 調(diào)用async函數(shù)result_test = test()console.log(“主進(jìn)程邏輯")result_test.then((r) => console.log(r))console.log("主進(jìn)程邏輯1")

執(zhí)行結(jié)果

call test同步執(zhí)行5s開始-------------    執(zhí)行了5s-------------同步執(zhí)行5s結(jié)束異步執(zhí)行10秒開始1595845827000主進(jìn)程邏輯主進(jìn)程邏輯1-------------    執(zhí)行了大概10s-------------異步執(zhí)行10秒結(jié)束異步執(zhí)行5秒開始1595846947000--------------    執(zhí)行了5s--------------異步執(zhí)行5秒結(jié)束將要執(zhí)行returnhello test

分析一下（有錯誤的歡迎留言）：

執(zhí)行的第一行代碼

result_test = test()

調(diào)用 test 函數(shù)，進(jìn)入 test 函數(shù)，test是由 async修飾的，在這個函數(shù)里代碼分為2類，同步代碼和異步代碼，同步代碼是不管 async 關(guān)鍵字的，肯定得執(zhí)行，所以  sleep_sync 同步執(zhí)行了 5s ，包括console.log都是同步代碼。對應(yīng)上面輸出

完后緊接著是下面的代碼

await sleep(10000)

先看sleep函數(shù)，先打印當(dāng)前時間，完后創(chuàng)建Promise對象，Promise對象創(chuàng)建完后會立馬執(zhí)行的，完后await 和 return 都會造成 async 修飾的函數(shù)返回，所以就到了主進(jìn)程了。當(dāng)主進(jìn)程打印完 ”主進(jìn)程邏輯1“ 就沒有代碼可執(zhí)行了。

接下來就到了 ”異步執(zhí)行10秒結(jié)束“  這個時間不一定是 10s，js是單線程的要是進(jìn)程阻塞嚴(yán)重的話可能會大于 10s。

在 async 里面，await都是串行執(zhí)行的，說以就執(zhí)行完 10s 那個開始執(zhí)行 5s 那個，完后再 return。

async函數(shù)返回的值都是 Promise，所以可以通過 then 獲取到值。

關(guān)于js的async和await該怎么理解就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。