JavaScript中Async/Await执行时长疑问：为何总耗时3秒而非6秒？

const promiseOne = new Promise(resolve=>{
    setTimeout(()=>resolve(1), 3000)
})
const promiseTwo = new Promise(resolve=>{
    setTimeout(()=>resolve(2), 2000)
})
const promiseThree = new Promise(resolve=>{
    setTimeout(()=>resolve(3), 1000)
})

const callAllPromiseInAsync = async () => {    
     const start = Date.now()
     const p1 = await promiseOne
     const p2 = await promiseTwo
     const p3 = await promiseThree
        
     console.log([p1,p2,p3])
     console.log( Date.now() - start)
}

调用上述函数时，总耗时约3秒，而非预期的3+2+1=6秒，请问原因是什么？

原因分析 #

核心问题在于Promise的执行时机：

• 当你在全局作用域创建promiseOne、promiseTwo、promiseThree这三个Promise实例时，它们内部的异步任务（setTimeout）会立即启动，而非等到await语句执行时才开始。
• 三个setTimeout是并行计时的：从代码执行开始，3秒、2秒、1秒的倒计时同时启动。
• 当async函数里执行await promiseOne时，它只需要等待3秒（最长的那个异步任务），此时promiseTwo和promiseThree的setTimeout已经分别完成了1秒和2秒的等待，早就处于resolved状态。后续的await promiseTwo和await promiseThree会直接获取结果，不会再等待额外时间。

如果要实现串行执行（总耗时6秒），需要把Promise的创建放到async函数内部，让它们在await时才启动：

const callAllPromiseInAsync = async () => {    
     const start = Date.now()
     // 每个Promise在await时才创建，异步任务串行启动
     const p1 = await new Promise(resolve=>setTimeout(()=>resolve(1),3000))
     const p2 = await new Promise(resolve=>setTimeout(()=>resolve(2),2000))
     const p3 = await new Promise(resolve=>setTimeout(()=>resolve(3),1000))
        
     console.log([p1,p2,p3])
     console.log( Date.now() - start) // 此时总耗时约6秒
}

内容的提问来源于stack exchange，提问作者Chinmoy kr