1. 程式人生 > >JS中的async/await的執行順序詳解

JS中的async/await的執行順序詳解

雖然大家知道async/await,但是很多人對這個方法中內部怎麼執行的還不是很瞭解,本文是我看了一遍技術部落格理解 JavaScript 的 async/await(如果對async/await不熟悉可以先看下http://es6.ruanyifeng.com/#docs/async)後拓展了一下,我理了一下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的執行順序。如果大家對有什麼意見或建議可以指出,希望大家不吝賜