正确使用异步函数的姿势
在编写异步函数时,await
、 return
与return await
之间存在差异,选择正确的处理方式非常重要。
让我们先从这个异步函数开始:
async function waitAndMaybeReject() {
// Wait one second
await new Promise(r => setTimeout(r, 1000));
// Toss a coin
const isHeads = Boolean(Math.round(Math.random()));
if (isHeads) return 'yay';
throw Error('Boo!');
}
这段代码将返回一个等待一秒的promise,同时各有一半的可能性返回'yay’
或者错误。 接下来我们以一些微妙的其他方式使用它:
仅仅调用
async function foo() {
try {
waitAndMaybeReject();
}
catch (e) {
return 'caught';
}
}
在这里,如果你调用foo
,返回的promise将始终得到undefined,而不是waiting。
由于我们没有 await 或返回 waitAndMaybeReject()
的结果,因此代码不会对它做出任何反应。 像这样的代码通常是错误的。
使用 await
async function foo() {
try {
await waitAndMaybeReject();
}
catch (e) {
return 'caught';
}
}
在这里,如果你调用foo
,返回的promise将始终等待一秒钟,然后得到返回值undefined,或者返回'caught'
。
因为我们await waitAndMaybeReject()
的结果,它将异常情况将变为throw,并且catch块将会被执行。 但是,如果waitAndMaybeReject()
完成,我们不会对该值执行任何操作。
使用return
async function foo() {
try {
return waitAndMaybeReject();
}
catch (e) {
return 'caught';
}
}
在这里,如果你调用foo,返回的promise将始终等待一秒,然后得到'yay'
,或者是Error(‘Boo!’)。
通过返回waitAndMaybeReject()
,我们推迟了它的结果,所以catch块永远不会运行。
使用return await
你在try/catch块中真正想要的东西是return await
:
async function foo() {
try {
return await waitAndMaybeReject();
}
catch (e) {
return 'caught';
}
}
在这里,如果你调用foo
,返回的promise将始终等待一秒,然后返回‘yay'
,或者得到'caught'
。
因为我们await waitAndMaybeReject()
的结果,所以它的异常情况将变为throw,并且我们的catch块将被执行。 如果waitAndMaybeReject()
完成,那么返回其结果。
如果上述内容令你感到困惑,可能把它分解为两个单独的步骤更容易理解:
async function foo() {
try {
//等待waitAndMaybeReject()的结果结算,
//并将履行的值分配给fulfilledValue:
const fulfilledValue = await waitAndMaybeReject();
//如果waitAndMaybeReject()的结果拒绝,我们的代码
//抛出异常,并跳到catch块。
//否则,此块继续运行:
return fulfilledValue;
}
catch (e) {
return 'caught';
}
}
注意:在try/catch块之外,return await
是多余的,甚至有一个ESLint规则来检测它,但是它允许存在于try/catch中。
前端圈刷题神器:前端面试星球

- 来源:疯狂的技术宅
- 原文链接:http://blog.yidengxuetang.com/post/2018/1226/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。