JavaScript中await调用async函数与直接调用的区别及最佳实践

1. 直接调用async函数与await调用的核心区别 #

async函数执行时有固定规则：调用后会同步执行函数体内代码，直到遇到第一个await关键字，就会立刻返回一个Pending状态的Promise，不会等待后续异步逻辑执行完成。

• 直接调用async函数：只会拿到返回的Promise，外层代码不会等待函数内部的异步逻辑跑完，会立刻继续执行后面的代码。你第一个示例里const fnPromise = fn();执行时，fn里同步输出starting，遇到await wait(100)就返回Promise，外层立刻执行console.log("after")，所以after会早于end输出。
• await调用async函数：会暂停当前外层async函数的后续执行，直到被调用的async函数返回的Promise状态敲定（成功/失败），才会继续执行外层await之后的代码。你第二个示例里await fn()会等fn完全执行完输出end之后，才会执行后面的console.log("after")。

2. await的使用场景与最佳实践 #

必须使用await的场景 #

• 你需要获取async函数的返回值做后续处理
• 后续逻辑依赖这个async函数的执行结果（比如必须等文件写入完成才能读文件、必须等用户信息接口返回才能渲染页面）
• 要捕获async函数内部的错误，用await搭配try/catch是最清晰的错误处理方式

可以不用await的场景 #

只有你完全不关心这个async函数的执行结果、也不需要处理它的报错时，才可以不用await。但要注意：如果async函数内部抛出错误，你既没有await也没有手动调用.catch()处理的话，会触发全局的unhandledrejection事件，在Node.js环境会直接导致进程退出，浏览器环境也会抛出全局报错。

扩展最佳实践：你提到的deferred await（延迟await）是非常典型的优化场景：如果要执行多个独立的异步任务，不用串行await，可以先直接调用所有async函数启动异步任务，之后再统一await所有返回的Promise，这样多个异步任务并行执行，能大幅减少总等待时间。

3. await是否会阻塞代码执行？ #

await不会阻塞全局JS主线程，只会暂停当前所在async函数的后续执行。
JS是单线程事件驱动模型，await只是让当前async函数让出主线程，主线程可以继续处理其他任务：比如响应用户点击、渲染页面、执行其他定时器回调等，等await的Promise状态敲定后，再把当前async函数的后续逻辑推进事件队列等待执行，完全不会卡住全局任务。

4. 大计算量代码中await new Promise(res => setTimeout(res, 0))的作用 #

这段代码的核心作用是主动让出主线程，避免长时间计算阻塞页面响应。
JS主线程同一时间只能处理一个任务，如果这个1亿次的for循环全程不间断执行，会霸占主线程几秒甚至几十秒，期间页面所有交互、渲染、其他逻辑都会完全卡住，表现为页面假死。
这里每处理完10万次计算，就通过await setTimeout(0)主动把主线程控制权交还给事件循环，让事件循环先处理队列里的其他待办任务（比如用户操作、页面重绘），等这些任务处理完，再回来继续执行剩下的循环计算。
关于你的疑问：

• 这里的await确实会暂停当前run函数的循环执行，等setTimeout回调触发才会继续后续循环，但这个暂停只针对run函数本身，不会阻塞主线程的其他任务
• 这就是此处用await的意义：既保证大量计算能正常完成，又不会让页面长时间无响应。

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