async/await 執行順序詳解

derek_334892 發布于2019-08-21 16:39 / 2093人閱讀

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

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

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

async/await 是建立在 promise 的基礎上。

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

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

async怎么處理返回值

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

輸出結果：

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

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

如果asyn函數沒有返回值

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

結果

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

結果返回Promise.resolve(undefined)。

await做了什么處理

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

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

async/await 執行順序

先看一個例子

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

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

async function test() {
    console.log("test start...");
    const v1 = await testSometing();//關鍵點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");});//關鍵點2
promise.then((val)=> console.log(val));

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

輸出結果：

test start...
執行testSometing
promise start..
test end...
testSometing
執行testAsync
promise
hello async
testSometing hello async

當test函數執行到

const v1 = await testSometing()；

的時候，會先執行testSometing這個函數打印出“執行testSometing”的字符串，然后因為await會讓出線程就會區執行后面的

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

然后打印出“promise start..”接下來會把返回的這promise放入promise隊列（Promise的Job Queue），繼續執行打印“test end...”，等本輪事件循環執行結束后，又會跳回到async函數中（test函數），等待之前await 后面表達式的返回值，因為testSometing 不是async函數，所以返回的是一個字符串“testSometing”，test函數繼續執行，執行到

const v2 = await testAsync();

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

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

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

async function testAsync() {
    console.log("執行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...")

輸出結果：

test start...
執行testSometing
promise start..
test end...
promise
testSometing
執行testAsync
hello async
testSometing hello async

和上一個例子比較發現promise.then((val)=> console.log(val));先與console.log(v1);執行了，原因是因為現在testSometing函數加了async，返回的是一個Promise對象要要等它resolve，所以將當前Promise推入隊列，所以會繼續跳出test函數執行后續代碼。之后就開始執行promise的任務隊列了，所以先執行了promise.then((val)=> console.log(val));因為這個Promise對象先推入隊列；

寫在最后

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

GPU云服務器云服務器 async await 執行順序執行順序問邏輯執行順序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88573.html

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

摘要：不再廢話，下面見題執行執行輸出結果執行執行這道題最難理解的地方和的執行順序，前面的結果一般沒有異議，如果不明白，百度一下變可以理解。先指明這道題是面試題的改版，原題可以看：promise、async和await之執行順序的那點事這道題也不是我改的，出處見：async/await 執行順序詳解這兩篇文章寫的非常好，我仔細琢磨了一下，感覺受益匪淺，決定記錄一下自己的理解。不再廢話，下面...

Jrain 2019-08-23 12:51 評論0 收藏0
8張圖幫你一步步看清 async/await 和 promise 的執行順序

摘要：第部分畫圖一步步看清宏任務微任務的執行過程我們以開篇的經典面試題為例，分析這個例子中的宏任務和微任務。注意這里只是把推入微任務隊列，并沒有執行。執行結束，才能繼續執行后面的代碼如圖此時當前宏任務都執行完了，要處理微任務隊列里的代碼。 8張圖讓你一步步看清 async/await 和 promise 的執行順序為什么寫這篇文章？測試一下自己有沒有必要看需要具備的前置基礎知識主...

weizx 2019-08-23 13:51 評論0 收藏0
現代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

摘要：控制臺將顯示回調地獄通常，回調只能由一個異步函數調用。更多資源使更友好規范使用異步函數簡化異步編碼旅程異步編程是一項在中無法避免的挑戰。 JavaScript經常聲稱是_異步_。那是什么意思？它如何影響發展？近年來這種方法有何變化？請思考以下代碼： result1 = doSomething1(); result2 = doSomething2(result1); 大多數語言都處理每...

shadowbook 2019-08-29 16:29 評論0 收藏0
現代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

摘要：控制臺將顯示回調地獄通常，回調只能由一個異步函數調用。更多資源使更友好規范使用異步函數簡化異步編碼旅程異步編程是一項在中無法避免的挑戰。 JavaScript經常聲稱是_異步_。那是什么意思？它如何影響發展？近年來這種方法有何變化？請思考以下代碼： result1 = doSomething1(); result2 = doSomething2(result1); 大多數語言都處理每...

oujie 2019-08-23 11:28 評論0 收藏0
現代JS中的流程控制：詳解Callbacks 、Promises 、Async/Await

摘要：控制臺將顯示回調地獄通常，回調只能由一個異步函數調用。更多資源使更友好規范使用異步函數簡化異步編碼旅程異步編程是一項在中無法避免的挑戰。 JavaScript經常聲稱是_異步_。那是什么意思？它如何影響發展？近年來這種方法有何變化？請思考以下代碼： result1 = doSomething1(); result2 = doSomething2(result1); 大多數語言都處理每...

anquan 2019-08-02 11:19 評論0 收藏0