前天遇到了
function _promiseFn(){
return new Promise(resolve=>{
resolve('I am Iron Man!');
});
}
const _res = await _promiseFn();
console.log(_res); // 'I am Iron Man!'
這樣的代碼，一直百思不得其解： await如何返回promise后resolve的結果病瞳？
PS:上面的代碼放在代碼塊中不能運行，畢竟 await 沒有放在 async 函數(shù)之中悲酷，不過瀏覽器的控制臺是可以直接運行的套菜。我猜測應該是控制臺的執(zhí)行層外面就是 async 函數(shù)吧？
其實這個問題的背后更深層的問題就是： async和await分別做了什么设易？
google了一些文章發(fā)現(xiàn)這篇文章講的還不錯逗柴，有興趣的朋友可以翻譯來看看。
Async
a function always returns a promise.
async函數(shù)會自動返回一個promise類型的方法如果設置了函數(shù)返回的值顿肺，js也會默認將這個返回值放入到
promise的resolve結果中
Await
makes JavaScript wait until that promise settles and returns its result.
會讓js“暫拖纺纾”當前
async函數(shù)內的執(zhí)行會把返回的
promise放入到任務隊列中掛起讓出主線程（javascript是單線程執(zhí)行）去執(zhí)行其他方法，直到該此線程執(zhí)行完成屠尊，才會繼續(xù)去任務隊列中依次取出
promise的返回結果
示例
瀏覽器控制臺中輸入：
function _fn(){
return new Promise(res=>{
setTimeout(()=>res(4),1000);
});
}
console.log(1)
await (
()=>{
setTimeout(()=>console.log(2),0);
}
)(); // (fn)() 立即執(zhí)行的匿名函數(shù)
console.log(3)
console.log(await _fn())
console.log(5)
setTimeout(()=>console.log(6),0)
按照我之前的思想旷祸，他的打印應該是：
// console.log(1)
// console.log(3)
// console.log(5)
// console.log(2)
// console.log(4)
// console.log(6)
現(xiàn)在理解了 async/await 的執(zhí)行機制，await 會等待返回 promise 的 resolve 結果讼昆。
那么正確的打印應該是：
// console.log(1) -- 正常執(zhí)行
// console.log(3) -- 正常執(zhí)行
// console.log(2) -- 返回的延時函數(shù)會放在下一次事件循環(huán)的0s后執(zhí)行
// console.log(4) -- 返回的延時函數(shù)會放在下一次事件循環(huán)的1s后執(zhí)行
// console.log(5) -- 會因為上個await返回的延時事件阻塞1s
// console.log(6) -- 返回的延時函數(shù)會放在再下一次事件循環(huán)的0s后執(zhí)行
參考文章
