JavaScript异步执行困惑：异步/同步函数互调的执行差异与选型疑问

先澄清两个新手最容易踩的认知偏差：

• JavaScript本身是单线程事件循环模型，不存在异步函数在后台独立进程并行运行的逻辑，所谓异步只是把不阻塞主线程的挂起任务排进任务队列，等对应触发条件满足后再回到主线程执行，根本没有跨进程并行的能力
• 没有加await的异步函数调用，不会暂停任何执行流，函数内部从开头到第一个await之前的同步代码会立刻跑完，碰到await才会把后续逻辑挂进微任务队列，立刻把执行权交还给外层

两段代码的执行逻辑拆解 #

第一段代码实际运行流程 #

• 外层是async修饰的asyncFunc，内部调用的f1、f2、f3都是无异步逻辑的普通同步函数
• 整个执行过程完全是同步顺序流：依次跑完f1全部代码→跑完f2全部代码→跑完f3全部代码，全程不会挂起任何任务到异步队列
• 仅因为async函数的语法特性，哪怕内部全是同步逻辑，最终会返回一个立刻resolve的Promise，没有任何异步拆分、队列排队的行为

第二段代码实际运行流程 #

• 外层是普通同步函数f，内部调用的asyncf1、asyncf2、asyncf3都是带异步逻辑的async函数
• 每次调用async函数时，会立刻执行函数内部从开头到第一个await之前的所有同步代码，碰到await才会把后续代码作为微任务挂起，立刻返回执行权给外层
• 完整执行时序是：
  1. 跑完asyncf1内部首个await前的全部同步代码
  2. 碰到asyncf1的await，挂起后续逻辑，立刻返回
  3. 跑完asyncf2内部首个await前的全部同步代码
  4. 碰到asyncf2的await，挂起后续逻辑，立刻返回
  5. 跑完asyncf3内部首个await前的全部同步代码
  6. 等外层同步代码全部执行完成后，再按微任务入队顺序，依次执行三个async函数被await挂起的后续逻辑

核心疑问解答 #

• 两种操作完全不等价
  二者的执行流从根本上存在差异：前者是全程同步的顺序执行，不会触发任何异步任务队列；后者会拆分出三个独立的异步挂起任务，存在微任务排队的执行过程，输出时序和最终结果不可能完全一致
• 二者的输出差异可以通过简单打印直观验证：
  第一段代码的输出顺序永远是固定的f1执行日志 → f2执行日志 → f3执行日志，没有任何时序偏移
  第二段代码在带await的场景下，输出顺序是asyncf1同步段日志 → asyncf2同步段日志 → asyncf3同步段日志 → 三个async函数的await后续日志按入队顺序输出，和前者的顺序存在本质区别
• 适用场景和推荐写法：
  • 如果多个任务存在顺序依赖（比如上一个任务的返回值要作为下一个任务的入参），推荐用async函数搭配await按顺序调用的写法，避免无意义的并行触发导致的竞态问题、数据错位
  • 如果多个任务完全无依赖（比如同时发起三个互不影响的网络请求），可以在同步流程中直接批量触发多个async调用，后续再通过Promise.all统一收集结果，这种场景下要注意做好错误捕获，避免未处理的Promise拒绝报错

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