如何优雅地处理Async/Await的异常?
译者按: 使用.catch()
来捕获所有的异常
本文采用意译,版权归原作者所有
async/await 中的异常处理很让人混乱。尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错。
假设你有一个叫做run()
的异步函数。在本文中,我会描述 3 种方式来处理run()
的异常情形: try/catch
, Go 语言风格, 函数调用的时候使用 catch()
(即run().catch()
)。 我会跟你解释为什么其实几乎只需要catch()
就足够。
try/catch
当你第一次使用async/await
, 你可能尝试使用try/catch
将每一个 async 操作包围起来。如果你await
一个被 reject 的 Promise,JavaScript 会抛出一个可以被捕获的错误。
run();
async function run() {
try {
await Promise.reject(new Error("Oops!"));
} catch (error) {
error.message; // "Oops!"
}
}
try/catch
能够捕获非异步的异常。
run();
async function run() {
const v = null;
try {
await Promise.resolve("foo");
v.thisWillThrow;
} catch (error) {
// "TypeError: Cannot read property 'thisWillThrow' of null"
error.message;
}
}
所以,只需要将所有的代码逻辑都用 try/catch
包围起来就可以搞定?也不完全正确。下面的代码会抛出unhandled promise rejection. await
将一个被拒绝的 promise 转换为可捕获的错误,但是 return
不行。
run();
async function run() {
try {
// 注意这里是return,不是await
return Promise.reject(new Error("Oops!"));
} catch (error) {
// 代码不会执行到这里
}
}
也不可能使用 return await
来绕开。
还有一个缺点就是使用了try/catch
之后,就很难用.
的语法来进行 Promise 链式组合了。
使用 Go 的语法
另一个常见的方式就是使用then()
将一个本来需要用catch()
来捕获并处理的 Promise 转换为普通的 Promise。然后像 Go 语言中一样,使用if(err)
来处理异常。
run();
async function throwAnError() {
throw new Error("Oops!");
}
async function noError() {
return 42;
}
async function run() {
// The `.then(() => null, err => err)` 来匹配正常/异常的情况。如果正常情况,返回`null`;如果异常,返回`err`
let err = await throwAnError().then(() => null, err => err);
if (err != null) {
err.message; // 'Oops'
}
err = await noError().then(() => null, err => err);
err; // null
}
如果你真的想要同时返回 error 和正确的值,你可以完全假装在用 Go 语言。
run();
async function throwAnError() {
throw new Error("Oops!");
}
async function noError() {
return 42;
}
async function run() {
// The `.then(v => [null, v], err => [err, null])` pattern
// 你可以使用数组解构来匹配err和返回值
let [err, res] = await throwAnError().then(
v => [null, v],
err => [err, null]
);
if (err != null) {
err.message; // 'Oops'
}
err = await noError().then(v => [null, v], err => [err, null]);
err; // null
res; // 42
}
使用 Go 语言风格的错误处理并不能摆脱return
无法捕获的情况。而且还让整个代码更加的复杂,如果忘记if(err != null)
,就会出问题。
总的来说,有两大缺点:
- 代码极度重复,每一个地方都少不了
if (err != null)
,真的很累,而且容易漏掉; run()
函数中的非异步的错误也无法处理;
总的来说,它并没有比try/catch
好多少。
在函数调用的时候使用catch()
try/catch
和 Go 语言风格的异常处理都有各自的使用场景,但是处理所有异常最好的方法是在run()
函数的后面使用catch()
,像这样:run().catch()
。换句话说,用一个catch()
来处理run
函数中的所有错误,而不是针对run
里面的每一种情况都去写代码做相应的处理。
run()
.catch(function handleError(err) {
err.message; // Oops!
})
// 在handleError中处理所有的异常
// 如果handleError出错,则退出。
.catch(err => {
process.nextTick(() => {
throw err;
});
});
async function run() {
await Promise.reject(new Error("Oops!"));
}
记住,async 函数总是返回 promise。只要函数中有异常,Promise 会 reject。而且,如果一个 async 函数返回的是一个 reject 的 Promise,那么这个 Promise 依然会继续被 reject。
run()
.catch(function handleError(err) {
err.message; // Oops!
})
.catch(err => {
process.nextTick(() => {
throw err;
});
});
async function run() {
// 注意:这里使用了return,而不是await
return Promise.reject(new Error("Oops!"));
}
为什么使用run().catch()
而不是将整个run()
函数用try/catch
包起来呢?我们首先来考虑一个情况:如果try/catch
的catch
部分有异常,我们应该如何处理呢?只有一个方法:在catch
里面接着使用try/catch
。所以,run().catch()
的模式使得异常处理变得非常简洁。
总结
我们最好是全局的有一个 errorHandler 来处理那些没有考虑到的异常,比如使用run().catch(handleError)
,而不是在run()
函数里面所有可能出错的地方加上try/catch
。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!
版权声明
转载时请注明作者 Fundebug以及本文地址:https://blog.fundebug.com/2019/07/24/async-await-error-handling-in-js/
如何优雅地处理Async/Await的异常?的更多相关文章
- 微信小程序捕获async/await函数异常实践
背景 我们的小程序项目的构建是与web项目保持一致的,完全使用webpack的生态来构建,没有使用小程序自带的构建功能,那么就需要我们配置代码转换的babel插件如Promise.Proxy等:另外, ...
- .NET异步操作学习之一:Async/Await中异常的处理
以前的异常处理,习惯了过程式的把出现的异常全部捕捉一遍,然后再进行处理.Async/Await关键字出来之后的确简化了异步编程,但也带来了一些问题.接下来自己将对这对关键字进行学习.然后把研究结果放在 ...
- 如何优雅的处理 async/await 异常
参考链接:https://cloud.tencent.com/developer/article/1470715 参考链接:https://www.jianshu.com/p/2935c0330dd2
- 优雅地 `async/await`
async/await 虽然取代了回调,使用类似同步的代码组织方式让代码更加简洁美观,但错误处理时需要加 try/catch. 比如下面这样,一个简单的 Node.js 中使用 async/await ...
- Vuex结合 async/await 优雅的管理接口请求
先看看 async/await 的语法 async 函数返回一个 Promise 对象 async 函数内部 return 返回的值.会成为 then 方法回调函数的参数. 1 2 3 4 async ...
- 进阶篇:以IL为剑,直指async/await
接上篇:30分钟?不需要,轻松读懂IL,这篇主要从IL入手来理解async/await的工作原理. 先简单介绍下async/await,这是.net 4.5引入的语法糖,配合Task使用可以非常优雅的 ...
- Async/Await替代Promise的6个理由
译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...
- promise async await使用
1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...
- callback vs async.js vs promise vs async / await
需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...
随机推荐
- logistic regression评价方法
1.sensitivity,也叫recall,true positive rate,含义是预测为正向的case中对的(true positive)和所有事实为正向的case的比例. 2.specifi ...
- Jinkins自动构建
Jinkins自动构建 1.项目添加 点击左侧操作栏“新建”,填写项目基础信息,如下图: 2. General配置 2.1 丢弃旧的构建 注:此处勾选丢弃旧的构建,默认天数为1,最大个数建议填写3-5 ...
- 浅谈JS递归
简单理解就是函数内部不断调用自身 直接上代码: function dg(num){ ){ ; }else{ ) } } console.log(dg()) 最后输出值为21,记住加限制条件退出递归,不 ...
- Vue生命周期钩子---3
vue生命周期流程图:4张图 : 生命周期的解析和应用: Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue ...
- Java实现单词自定义排序|集合类、工具类排序、comparable、comparator接口
课题 针对单词进行排序,先按字母的长度排序,长者在前: 在长度相等的情况下,按字典降序排序. 例如,有单词序列"apple banana grape orange",排序后输出结果 ...
- Pwnable-cmd1
ssh cmd1@pwnable.kr -p2222 (pw:guest) 先看一下c的源码 #include <stdio.h> #include <string.h> in ...
- Pwnable-mistake
先看看c的源码 #include <stdio.h> #include <fcntl.h> #define PW_LEN 10 #define XORKEY 1 void xo ...
- day47_9_6(前端之js)
一.js发展. 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准.次年,ECMA发布262号 ...
- lua 2 变量
变量在使用前,必须在代码中进行声明,即创建该变量. 编译程序执行代码之前编译器需要知道如何给语句变量开辟存储区,用于存储变量的值. Lua 变量有三种类型:全局变量.局部变量.表中的域. Lua 中的 ...
- React、Vue、Angular对比 ---- 介绍及优缺点
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它.它 ...