事件循环面试题之async await promise的输出顺序

前端小白132
62 阅读3分钟

await一个async函数-1 无return/return 非Promise

await一个async函数-2 return Promise

await一个async函数-3 return new Promise

await一个非async函数-1 无return/return 非Promise

await一个非async函数-2 return Promise

await一个非async函数-3 return new Promise

await一个async函数-1 无return/return 非Promise

async function async1() {
    await async2() 
    console.log('3')
}
async function async2() {
    console.log('1')
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

输出： nodejs=chrome=firefox= 12345 相当于把await后面的作为Promise看待,即直接把await后面的东西用Promise.then()包裹起来,会先执行 await fn()相当于fn().then(()=>await下一行代码开始的内容),即:

async function async1() {
     async2().then(()=>{
        console.log('3')
     })
}
async function async2() {
    console.log('1')
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

await一个async函数-2 return Promise

async function async1() {
    await async2() 
    console.log('3')
}
async function async2() {
    console.log('1')
    return Promise.resolve()
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

输出： nodejs=chrome=firefox= 12453 相当于把await后面的放到所有Promise执行完之后？ await fn()相当于fn().then(()=>await下一行代码开始的内容),即:

async function async1() {
     async2().then(()=>{
        console.log('3')
    })
    
}
async function async2() {
    console.log('1')
    return Promise.resolve()
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

await一个async函数-3 return new Promise

async function async1() {
    await async2() 
    console.log('3')
}
async function async2() {
    console.log('1')
    return new Promise(resolve=>{
        console.log('6')
        resolve()
    }).then(()=>{
        console.log('7')
    })
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

输出： nodejs=chrome=firefox= 1627453 相当于把await后面的放到所有Promise执行完之后？(同上) await fn()相当于fn().then(()=>await下一行代码开始的内容),即:

async function async1() {
    async2().then(()=>{
        console.log('3')
    })
}
async function async2() {
    console.log('1')
    return new Promise(resolve=>{
        console.log('6')
        resolve()
    }).then(()=>{
        console.log('7')
    })
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

await一个非async函数-1 无return/return 非Promise

async function async1() {
    await async2() 
    console.log('3')
}
function async2() {
    console.log('1')
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

输出： nodejs=chrome=firefox= 12345 相当于把await后面的作为Promise看待,即直接把await后面的东西用Promise.then()包裹起来,会先执行 await fn()相当于fn().then(()=>await下一行代码开始的内容),即:

async function async1() {
    async2().then(()=>{
        console.log('3')
    })
}
function async2() {
    console.log('1')
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

（没错，即使await fn()中，fn不是async函数也没有返回promise，还是会当成会返回promise一样处理。await下一行代码开始始终会变成微任务）

await一个非async函数-2 return Promise

async function async1() {
    await async2() 
    console.log('3')
}
function async2() {
    console.log('1')
    return Promise.resolve()
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

输出： nodejs=chrome=firefox= 12345 相当于把await后面的作为Promise看待,即直接把await后面的东西用Promise.then()包裹起来,会先执行 await fn()相当于fn().then(()=>await下一行代码开始的内容),即:

async function async1() {
    async2().then(()=>{
        console.log('3')
    })
}
function async2() {
    console.log('1')
    return Promise.resolve()
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

await一个非async函数-3 return new Promise

async function async1() {
    await async2() 
    console.log('3')
}
function async2() {
    console.log('1')
    return new Promise(resolve=>{
        console.log('6')
        resolve()
    }).then(()=>{
        console.log('7')
    })
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

输出： nodejs=chrome=firefox= 1627435 await fn()相当于fn().then(()=>await下一行代码开始的内容),即:

async function async1() {
    async2().then(()=>{
        console.log('3')
    })
    
}
function async2() {
    console.log('1')
    return new Promise(resolve=>{
        console.log('6')
        resolve()
    }).then(()=>{
        console.log('7')
    })
}
async1()
 
new Promise(resolve => {
    console.log('2')
    resolve()
})
.then(function() {
    console.log('4')
})
.then(function() {
    console.log('5')
})

结论

await fn()相当于fn().then(()=>await下一行代码开始的内容)，即使await fn()中，fn不是async函数也没有返回promise，还是会当成会返回promise一样处理。await下一行代码开始始终会变成微任务）

avatar
文章
阅读
粉丝