代码如下:
function request() {
return new Promise(resolve => {
resolve('request')
})
}
console.log('script start')
setTimeout(() => {
console.log('setTimeout')
})
Promise.resolve().then(() => {
console.log('promise 1')
}).then(() => {
console.log('promise 2')
})
async function foo() {
await request()
console.log('req end')
}
foo()
console.log('script end')
打印的结果如下:
不明白的点在于,为什么req end 夹在promise1 和 promise2之间打印出来了
而如果换成这样:
console.log('script start')
setTimeout(() => {
console.log('setTimeout')
})
Promise.resolve().then(() => {
console.log('promise 1')
}).then(() => {
console.log('promise 2')
})
async function foo() {
await fetch('https://randomuser.me/api')
console.log('req end')
}
foo()
console.log('script end')
打印的结果就是这样的:
为什么呢?和fetch有关吗?
你这个问题可以解释为
Promise.then
回调的执行顺序Promises/A+规范
举个例子:
打印结果为:promise 1、promise 2、req end。
解释为
再看个你这个例子
打印结果为:promise 1、req end、promise 2。
我们先看下概念
当执行完
console.log('promise 1')
并打印promise 1
后,执行完了,没有返回东西,可以理解为返回undefined ,用x完成(fulfill)promise,这个时候把console.log('promise 2')
放到微任务等待执行。继续走,遇到
async await
,等待request()
执行完,继续走,打印eq end
。所有同步任务完成,执行微任务里的console.log('promise 2')