async/await 執(zhí)行順序詳解

derek_334892 發(fā)布于2019-08-21 16:39 / 2100人閱讀

摘要：怎么處理返回值輸出結(jié)果從結(jié)果中可以看到函數(shù)返回的是一個對象，如果在函數(shù)中一個直接量，會把這個直接量通過封裝成對象。如果函數(shù)沒有返回值結(jié)果結(jié)果返回。

隨著async/await正式納入ES7標(biāo)準(zhǔn)，越來越多的人開始研究據(jù)說是異步編程終級解決方案的 async/await。但是很多人對這個方法中內(nèi)部怎么執(zhí)行的還不是很了解，本文是我看了一遍技術(shù)博客理解 JavaScript 的 async/await（如果對async／await不熟悉可以先看下這篇文章）后拓展了一下，我理了一下await之后js的執(zhí)行順序，希望可以給別人解疑答惑，先簡單介紹一下async／await。

async/await 是一種編寫異步代碼的新方法。之前異步代碼的方案是回調(diào)和 promise。

async/await 是建立在 promise 的基礎(chǔ)上。

async/await 像 promise 一樣，也是非阻塞的。

async/await 讓異步代碼看起來、表現(xiàn)起來更像同步代碼。這正是其威力所在。

async怎么處理返回值

async function testAsync() {
    return "hello async";
}
let result = testAsync();
console.log(result)

輸出結(jié)果：

Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"}

從結(jié)果中可以看到async函數(shù)返回的是一個promise對象，如果在函數(shù)中 return 一個直接量，async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。

如果asyn函數(shù)沒有返回值

async function testAsync1() {
    console.log("hello async");
}
let result1 = testAsync1();
console.log(result1);

結(jié)果

hello async
Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

結(jié)果返回Promise.resolve(undefined)。

await做了什么處理

從字面意思上看await就是等待，await 等待的是一個表達(dá)式，這個表達(dá)式的返回值可以是一個promise對象也可以是其他值。

很多人以為await會一直等待之后的表達(dá)式執(zhí)行完之后才會繼續(xù)執(zhí)行后面的代碼，實(shí)際上await是一個讓出線程的標(biāo)志。await后面的函數(shù)會先執(zhí)行一遍，然后就會跳出整個async函數(shù)來執(zhí)行后面js棧（后面會詳述）的代碼。等本輪事件循環(huán)執(zhí)行完了之后又會跳回到async函數(shù)中等待await
后面表達(dá)式的返回值，如果返回值為非promise則繼續(xù)執(zhí)行async函數(shù)后面的代碼，否則將返回的promise放入promise隊(duì)列（Promise的Job Queue）

async/await 執(zhí)行順序

先看一個例子

function testSometing() {
    console.log("執(zhí)行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("執(zhí)行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();//關(guān)鍵點(diǎn)1
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//關(guān)鍵點(diǎn)2
promise.then((val)=> console.log(val));

console.log("test end...")

輸出結(jié)果：

test start...
執(zhí)行testSometing
promise start..
test end...
testSometing
執(zhí)行testAsync
promise
hello async
testSometing hello async

當(dāng)test函數(shù)執(zhí)行到

const v1 = await testSometing()；

的時候，會先執(zhí)行testSometing這個函數(shù)打印出“執(zhí)行testSometing”的字符串，然后因?yàn)閍wait會讓出線程就會區(qū)執(zhí)行后面的

var promise = new Promise((resolve)=> { console.log("promise
start.."); resolve("promise");});//關(guān)鍵點(diǎn)2

然后打印出“promise start..”接下來會把返回的這promise放入promise隊(duì)列（Promise的Job Queue），繼續(xù)執(zhí)行打印“test end...”，等本輪事件循環(huán)執(zhí)行結(jié)束后，又會跳回到async函數(shù)中（test函數(shù)），等待之前await 后面表達(dá)式的返回值，因?yàn)閠estSometing 不是async函數(shù)，所以返回的是一個字符串“testSometing”，test函數(shù)繼續(xù)執(zhí)行，執(zhí)行到

const v2 = await testAsync();

和之前一樣又會跳出test函數(shù)，執(zhí)行后續(xù)代碼，此時事件循環(huán)就到了promise的隊(duì)列，執(zhí)行promise.then((val)=> console.log(val));then后面的語句，之后和前面一樣又跳回到test函數(shù)繼續(xù)執(zhí)行。

這個就是在async/await 函數(shù)之后js的執(zhí)行順序，我們再看一個列子把testSometing函數(shù)前面加上async

async function testSometing() {
    console.log("執(zhí)行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("執(zhí)行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

輸出結(jié)果：

test start...
執(zhí)行testSometing
promise start..
test end...
promise
testSometing
執(zhí)行testAsync
hello async
testSometing hello async

和上一個例子比較發(fā)現(xiàn)promise.then((val)=> console.log(val));先與console.log(v1);執(zhí)行了，原因是因?yàn)楝F(xiàn)在testSometing函數(shù)加了async，返回的是一個Promise對象要要等它resolve，所以將當(dāng)前Promise推入隊(duì)列，所以會繼續(xù)跳出test函數(shù)執(zhí)行后續(xù)代碼。之后就開始執(zhí)行promise的任務(wù)隊(duì)列了，所以先執(zhí)行了promise.then((val)=> console.log(val));因?yàn)檫@個Promise對象先推入隊(duì)列；

寫在最后

寫到這里大家應(yīng)該已經(jīng)清楚了使用async/await進(jìn)行異步操作時js的執(zhí)行順序，在研究過程中還發(fā)現(xiàn)了js的任務(wù)隊(duì)列執(zhí)行順序的問題，就下次再述。如果大家對有什么意見或建議可以指出。本篇是我第一次發(fā)布文章，希望大家不吝賜教。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88573.html

發(fā)表評論

登陸后可評論

0條評論

derek_334892

男|高級講師

我要關(guān)注我要私信

TA的文章

DediPath: 夏季特賣會！VPS和混合服務(wù)器5折優(yōu)惠，|英特爾至強(qiáng)E3-1230v3專用服務(wù)器

閱讀 2423·2021-08-18 10:21
iKcamp出品｜微信小程序｜工具安裝+目錄說明｜基于最新版1.0開發(fā)者工具初中級教程分享

閱讀 2531·2019-08-30 13:45
微信小程序開發(fā)-個人總結(jié)

閱讀 2161·2019-08-30 13:16
Web-Fontmin -- 在線提取你需要的字體

閱讀 2126·2019-08-30 12:52
常見的CSS布局樣式

閱讀 1372·2019-08-30 11:20
關(guān)于 emotion 初步使用的筆記

閱讀 2631·2019-08-29 13:47
移動Web開發(fā)小結(jié)

閱讀 1629·2019-08-29 11:22
JavaScript中的Function類型

閱讀 2769·2019-08-26 12:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

async/await 執(zhí)行順序詳解

相關(guān)文章

**搞懂一道async await, promise， setTimeout執(zhí)行順序的前端面試題**

**8張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序**

現(xiàn)代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

現(xiàn)代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

現(xiàn)代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

發(fā)表評論

0條評論

derek_334892

男|高級講師

TA的文章

DediPath: 夏季特賣會！VPS和混合服務(wù)器5折優(yōu)惠，|英特爾至強(qiáng)E3-1230v3專用服務(wù)器

iKcamp出品｜微信小程序｜工具安裝+目錄說明｜基于最新版1.0開發(fā)者工具初中級教程分享

微信小程序開發(fā)-個人總結(jié)

Web-Fontmin -- 在線提取你需要的字體

常見的CSS布局樣式

關(guān)于 emotion 初步使用的筆記

移動Web開發(fā)小結(jié)

JavaScript中的Function類型

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

async/await 執(zhí)行順序詳解

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！