https://zhuanlan.zhihu.com/p/41543963
https://juejin.im/post/59e85eebf265da430d571f89#heading-9
https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5be04a8e6fb9a04a072fd2cd
0. Event Loop
console.log('1');
setTimeout(function() {
console.log('2');
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('3')
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('10')
}).then(function() {
console.log('12')
})
})
await 執(zhí)行順序
let a = 0
let b = async () => {
a = a + await 10
console.log('2', a)
}
b()
a++
console.log('1', a)
function testPromise() {
return new Promise(resolve => {
resolve('promise')
})
}
async function asyncFn() {
let res = await testPromise()
console.log(res)
}
asyncFn()
console.log('script end')
function testPromise() {
return 'promise'
}
async function asyncFn() {
let res = await testPromise()
console.log(res)
}
asyncFn()
console.log('script end')
Promise.resolve
new Promise(res => res())
function testPromise() {
return new Promise(resolve => {
resolve('promise')
})
}
async function asyncFn() {
let res = await testPromise()
console.log(res)
}
new Promise(res => res('xxx'))
.then(res => console.log(res))
asyncFn()
console.log('script end')
async function asyncFn() {
console.log('asyncFn')
let res = await asyncFn2()
console.log(res)
}
async function asyncFn2() {
console.log('asyncFn2')
let res = await fn3()
console.log(res)
return 'asyncFn2 return'
}
function fn3() {
console.log('fn3')
}
setTimeout(() => {
console.log('setTimeout')
}, 0)
console.log('script start')
asyncFn()
let promise = new Promise(resolve => {
console.log('promise')
resolve('promise resolved')
console.log('after promise resolved')
}).then(res => {
console.log(res)
})
console.log('script end')
對(duì)于以上代碼你可能會(huì)有疑惑,讓我來(lái)解釋下原因
首先函數(shù) b 先執(zhí)行,在執(zhí)行到 await 10 之前變量 a 還是 0,因?yàn)?await 內(nèi)部實(shí)現(xiàn)了 generator ,generator 會(huì)保留堆棧中東西,所以這時(shí)候 a = 0 被保存了下來(lái)
因?yàn)?await 是異步操作,后來(lái)的表達(dá)式不返回 Promise 的話,就會(huì)包裝成 Promise.reslove(返回值),然后會(huì)去執(zhí)行函數(shù)外的同步代碼
同步代碼執(zhí)行完畢后開(kāi)始執(zhí)行異步代碼,將保存下來(lái)的值拿出來(lái)使用,這時(shí)候 a = 0 + 10
上述解釋中提到了 await 內(nèi)部實(shí)現(xiàn)了 generator,其實(shí) await 就是 generator 加上 Promise 的語(yǔ)法糖,且內(nèi)部實(shí)現(xiàn)了自動(dòng)執(zhí)行 generator。如果你熟悉 co 的話,其實(shí)自己就可以實(shí)現(xiàn)這樣的語(yǔ)法糖。