await/async无法捕获与处理错误信息的解决方案分享
前言
如果你对同步任务/异步任务/回到地狱/promise概念/async-await的作用不是很了解的话，或许需要看一下以下简单的介绍。
如果都了解则可以直接点击侧边栏跳到下面看await无法处理错误信息的解决方案。
同步和异步
javascript是一个单线程的语言。因为是单线程。所以这直接导致了线程阻塞的问题，在前一个任务完成以前，后面所有的任务都无法执行。因为这个问题。所以javascript有了异步任务的概念。
javascript把其中的任务分为两部分，一种是同步任务，一种是异步任务，一些可能造成阻塞的任务归为异步任务，并将异步任务放到所有的同步任务之后去执行，以解决阻塞问题。
常见的异步任务有
- settimeout/setInterval
- Promise的then函数
- XMLHttpRequest（http请求也就是ajax）
异步任务解决了执行堵塞的问题，同时也存在一些问题（如下）。
异步任务所存在的问题
异步任务需要回调来处理任务结束以后的一些动作。在一些特殊场景下，有些异步任务需要依赖于其他异步任务的回调。这就需要将需要依赖的异步任务写到被依赖的异步任务的回调中。
这是一种解决依赖异步依赖的方案，虽然可行，但不可读。 总会出现依赖层级较多的情况，大量的层级会让这个功能变得非常晦涩。可读性极差。如下👇
虽然一般开发中很少会出现这种嵌套7层的异步任务。但嵌套3，4层还是相对常见的。多层的嵌套配合本身存在的逻辑。对代码的阅读非常不友好。前端工程师们为了解决这个问题。在ES6中推出了Promise。
Promise如何解决回调地狱
Promise提供resolve和reject两个函数来代表异步任务的成功和失败。最关键的一点是Promise提供了.then()和.catch()函数，.then()函数负责处理异步任务成功后的动作，.catch()负责处理异步任务失败后的动作。
他们在一定程度上优化了回调地狱
Promise还可以进行链式调用
虽然Promise对于地狱回调有所改善。但他依然有着一定的嵌套结构存在。有没有什么方案可以彻底脱离嵌套结构？
有
es6后来又推出了async/await(Promise的语法糖)。
async/await，回调地狱的最终方案
async/await完全解决了回调嵌套的问题。实现了以看似同步的代码，完成异步的需求。
async右边的函数会返回一个Promise对象。如图👇
await是等待一个async函数执行完毕，并提取Promise中的值。👇
这样，我们就摆脱了嵌套结构的问题。现在我们来看下整套一起使用。
async/await错误处理方案
async/await作为promise的语法糖。它彻底解决了回调地狱的问题，但也存在一个问题。相对于Promise的链式调用。async/await无法捕获错误。普通的Promise是通过.catch()和reject()配合来进行错误程序处理。但是async/await并没有在语法内部提供错误处理。
这就导致了如果异步请求错误，我们无法做出相应补救措施而且错误信息会在控制台打印。
现在我们常规await的处理方案有以下几种。
第一种，手动添加啊try{}catch{}进行捕获
我们可以通过手动给async函数内部添加*try{}catch{}*来进行错误捕获，如此，就可以避免错误在控制台打印和阻塞代码的运行。如下
这种做法的弊端是:需要捕获错误的async多的话。每一个都写下去，就比较麻烦和不可读了。
第二种，使用await-to-js库
网上总有大牛帮我们解决这些问题。await-to-js是一个帮助我们解决异步错误处理的库，知名度较高，到目前有2.7k的⭐。
import to from "await-to-js";
//模拟请求
const handleFetch = async () => {
fetch("/url"，{})
}
//进行错误捕获和处理
const [err, result] = await to(handleFetch());
if (err) {
//进行错误动作处理
}这是一种比较简单的处理方式
源码 ---ts版本
| --- | ------------------------------------------------------------------------------------- |
| | * @param { Promise } promise |
| | * @param { Object= } errorExt - Additional Information you can pass to the err object |
| | * @return { Promise } |
| | */ |
| | export function to<T, U = Error> ( |
| | promise: Promise<T>, |
| | errorExt?: object |
| | ): Promise<[U, undefined] | [null, T]> { |
| | return promise |
| | .then<[null, T]>((data: T) => [null, data]) |
| | .catch<[U, undefined]>((err: U) => { |
| | if (errorExt) { |
| | const parsedError = Object.assign({}, err, errorExt); |
| | return [parsedError, undefined]; |
| | } |
| | |
| | return [err, undefined]; |
| | }); |
| | } |
| | |
| | export default tots版本的源码可能不便于阅读，以下是我翻译成js版本的源码 ，并附加注解
export function to(
promise,
errorExt,
) {
return promise
//成功，则error返回null，result返回data
.then((data) => [null, data])
//错误则捕获错误内容，然后返回错误信息，result为undefined
.catch((err) => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt);
return [parsedError, undefined];
}
return [err, undefined];
});
}最后
相较于自己使用try和catch进行捕获，我更喜欢使用await-to-js这个库，简单方便，而且贴近hooks的写法让我觉得亲切。
是否有必要给每一个请求都加上一个错误捕获？我想是不需要的。我们需要知道，错误捕获并不是无偿的。在很多情况下我们并不需要去做这种特殊的处理，比如获取分页数据等。一般情况，只需要给一些可能会出现问题的async/await做这个处理即可。
总结
捕获async和await的方法有两种
- 手动添加try{}catch{}
- 使用await-to-js异步错误处理库
到此这篇关于await/async无法捕获与处理错误信息的解决方案的文章就介绍到这了,更多相关await/async无法捕获与处理错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
打开网页时提示 Stack overflow at line: 0。img图片的onerror事件需要注意的细节。2011-01-01
tbody元素支持嵌套的注意方法...2007-03-03
组件是一个单独且可复用的功能模块的封装,每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值,这篇文章主要给大家介绍了关于uniapp封装小程序雷达图组件的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
下面小编就为大家带来一篇js重写方法的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
JavaScript 中的数组长度是一个比较常见的坑,理解数组长度的工作原理非常重要,下面就跟随小编一起来了解下如何解决JavaScript中的数组长度不对的问题吧2024-12-12
eval函数在js中有不少用处了，下面我来给各位朋友介绍eval解析json的实例，基于这个实例我们引出来在eval处理json数据时的一些注意事项，希望文章对各位同学会有所帮助2014-01-01
这篇文章主要介绍了JS实现的系统调色板,结合完整实例形式分析了js实现调色板效果的具体步骤与实现技巧,涉及js数值计算与页面元素操作的方法,需要的朋友可以参考下2016-12-12
最近重新温习了一次《javascript设计模式》，确实是一本好书，每次看都有不同的领悟，每次领悟到的都受益匪浅，无怪古圣人都说学无止镜了，仅以“加油，好吗？”共勉！2009-10-10
今天小编就为大家分享一篇layui清空,重置表单数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论