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 执行顺序
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')
对于以上代码你可能会有疑惑,让我来解释下原因
首先函数 b 先执行,在执行到 await 10 之前变量 a 还是 0,因为 await 内部实现了 generator ,generator 会保留堆栈中东西,所以这时候 a = 0 被保存了下来
因为 await 是异步操作,后来的表达式不返回 Promise 的话,就会包装成 Promise.reslove(返回值),然后会去执行函数外的同步代码
同步代码执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候 a = 0 + 10
上述解释中提到了 await 内部实现了 generator,其实 await 就是 generator 加上 Promise 的语法糖,且内部实现了自动执行 generator。如果你熟悉 co 的话,其实自己就可以实现这样的语法糖。