使用await搭配.then是否必要？两种异步写法的差异及result可用性疑问

首先看定义的异步函数：

async function f1 (){
  // 数据库操作
  return result
}

对比以下两段代码的差异：

代码片段1 #

await f1()
.then((result)=> { /* something1. 这里能使用result吗？ */ })

代码片段2 #

f1()
.then((result)=> { /* something2. 这里能使用result吗？ */ })

两者的核心差异 #

• 代码阻塞行为

  • 代码片段2：属于标准Promise链式调用，调用f1()后立刻返回一个Promise，不会阻塞当前同步代码流程，.then()的回调会在f1()的异步数据库操作完成后，进入事件队列等待执行。
  • 代码片段1：await f1()会先暂停当前异步函数的执行，等待f1()异步操作完成并拿到返回的result，之后再对这个result调用.then()——此时JS会自动把result包装成已resolve的Promise再执行回调，这部分逻辑是同步执行的，且整个await f1().then(...)会阻塞当前异步函数的后续代码，直到所有流程完成。

• 整体返回值

  • 代码片段2的返回值是.then()处理后生成的新Promise。
  • 代码片段1的返回值是await解析完整个流程后的结果：如果.then()回调返回普通值，那就是这个普通值；如果回调返回Promise，await会继续等待该Promise完成，最终返回其解析后的值。

关于result的可用性 #

两处.then()回调中的result都可以正常使用：

• 代码片段2中，.then()的参数就是f1()异步操作完成后返回的result，完全符合Promise的设计逻辑。
• 代码片段1中，await f1()已经拿到了f1()的返回值result，调用.then()时JS会自动将result包装为已resolve的Promise，所以.then()回调的参数依然是这个result，可以直接使用。

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