JavaScript中return await究竟有无用武之

我先回答：有的，参考文章末尾。

有没有区别？

 先上一个Demo，看看async函数中return时加和不加await有没有区别：

function bar() {
  return Promise.resolve('this from bar().');
}

async function foo1() {
  return await bar(); // CASE#1 with await
}

async function foo2() {
  return bar(); // CASE#2 without await
}

// main
(() => {
  foo1().then((res) => {
    console.log('foo1:', res); // res is string: 'this from bar().'
  })
  foo2().then((res) => {
    console.log('foo2:', res); // res is string: 'this from bar().'
  })
})();

 可能在一些社区或团队的编程规范中，有明确要求：不允许使用非必要的 return await。给出的原因是这样做对于foo函数而言，会增加等待bar函数返回的Promise出结果的时间（但其实它可以不用等，因为马上就要return了嘛，这个时间应留给foo函数的调用者去等）。

 如果你觉得上面的文字不大通顺，直接看代码，问：以上例子中，foo1()函数和foo2()函数的写法对程序的执行过程有何影响？

 先说结论：async 函数中 return await promise; 和 return promise; 从宏观结果来看是一样的，但微观上有区别。

有什么区别？

 基于上面的Demo改造一下，做个试验：

const TAG = Symbol();
const RESULT = Promise.resolve('return from bar().');
RESULT[TAG] = 'TAG#RESULT';

function bar() {
  return RESULT;
}

async function foo1() {
  return await bar();
}

async function foo2() {
  const foo2Ret = bar();
  console.log('foo2Ret(i):', foo2Ret[TAG], foo2Ret === RESULT); // 'TAG#RESULT', true  (1)
  return foo2Ret; // without await
}

// main
(() => {
  const foo1Ret = foo1();
  console.log('foo1Ret:', foo1Ret[TAG], foo1Ret === RESULT); // undefined, false  (2)
  console.log('--------------------------------------------');
  const foo2Ret = foo2();
  console.log('foo2Ret(o):', foo2Ret[TAG], foo2Ret === RESULT); // undefined, false  (3)
})();

 从注释标注的执行结果可以看到：

• (1)处没有疑问，foo2Ret 本来就是 RESULT；
• (2)处应该也没有疑问，foo1Ret 是基于 RESULT 这个Promise的结果重新包装的一个新的Promise（只是这个Promise的结果和Result是一致的）；
• (3)处应该和常识相悖，竟然和(2)不一样？是的，对于 async 函数不管return啥都会包成Promise，而且不是简单的通过 Pomise.resolve() 包装。

 那么结论就很清晰了，async 函数中 return await promise; 和 return promise; 至少有两个区别：

1. 对象上的区别：
   • return await promise; 会先把promise的结果解出来，再构造成新的Promise
   • return await promise; 直接在promise的基础上构造Promise，也就是套了两个Promise（两层Promise的状态和结果是一致的）
2. 时间上的区别：假设 bar() 函数耗时 10s
   • foo1() 中的写法会导致这10s消耗在 foo1() 函数的执行上
   • foo2() 的写法则会让10s的消耗在 foo2() 函数的调用者侧，也就是注释为main的匿名立即函数

 从对象上的区别看，不论怎样async函数都会构造新的Promise对象，有无await都节约不了内存；从时间上来看，总体的等待时长理论上是一样的，怎么写对结果都没啥影响嘛。

 举个不大恰当的例子：你的上司交给你一个重要任务让你完成后发邮件给他，你分析了下后发现任务需要同事A做一部分，遂找他。同事A完成他的部分需要2天。这个时候你有两个做法选择：一、做完自己的部分后等着A出结果，有结果后再发邮件回复上司；二、将自己的部分完成后汇报给上司，并跟和上司说已经告知A：让A等完成他的部分后直接回邮件给上司。

 如果，我是说假如果哈，如果，这个重要任务本来要求必须在12h内完成，但实际耗时了两天严重超标......请问上述例子中哪种做法更容易获取N+1大礼包？

到底怎么写？

 回到代码层，通过上述分析可以知道，一个主要是耗时归属问题，一个是async函数“总是”会返回的那个Promise对象不是由Promise.resolve()简单包装的（因为Promise.resolve(promise) === promise），可以得到两个编码指南：

强调下，async函数不是通过Pomise.resolve()简单包装的，其实进一步思考下也不难理解，因为它要考虑执行有异常的场景，甚至还可能根据不同的Promise状态做一些其他的操作（比如日志输出、埋点统计？我瞎猜的）

// 避免非必要的 return await 影响模块耗时统计的准确性
async function foo() {
  return bar();
}

// 除非你要处理执行过程中的异常
async function foo() {
  try {
    return await bar();
  } catch (_) {
    return null;
  }
}
// 或:
async function foo() {
  return bar().catch(() => null);
}

// async 函数中避免对返回值再使用多余的 Pomise 包装
async function bar() {
  return 'this is from bar().'; // YES
}
async function bar() {
  return Promise.resolve('this is from bar().'); // !!! NO !!!
}

回到标题：JavaScript中return await有无用武之地？

答：有的，当需要消化掉依赖 Promise 执行中的异常时。