隨着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對象先推入隊列;