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;
至少有两个区别:
- 对象上的区别:
return await promise;
会先把promise
的结果解出来,再构造成新的Promisereturn await promise;
直接在promise
的基础上构造Promise,也就是套了两个Promise(两层Promise的状态和结果是一致的)
- 时间上的区别:假设
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
作者:Chavin
来源:juejin.cn/post/7268593569781350455
执行中的异常时。