【源码共读】如何优雅的处理 Promise 的错误

简介: 【源码共读】如何优雅的处理 Promise 的错误


Promise解决了优雅的解决了回调地域的问题,现在已经大范围的使用Promise,但是在使用Promise的过程中,最令人头疼的就是错误处理的方式。


Promise 的错误处理方式


据我对Promise的了解,Promise的错误处理分为下面的几种方式,如果有还有其他的处理方式,欢迎大家指出。


1. try catch


try catch是最常见的错误处理方式:


         

但是这种方式有一个致命的缺点,就是只能捕获同步的错误,对于异步的错误,是无法捕获的。


2. Promise.prototype.catch


Promise提供了catch方法,用于捕获Promise的错误:


         

3. Promise.prototype.then


Promise提供了then方法,用于捕获Promise的成功和失败:


         


这种方式我放在catch的后面,是因为我很少用,有时候我感觉它很鸡肋,因为它只能处理Promise执行体的错误,而不能处理自己本身的错误:


         

链式调用


上面说的几种错误处理方式都是对Promise的单次调用,怎么样处理都是可以的;


但是Promise的出现就是为了解决回调地域的问题,所以我们经常会使用链式调用的方式:


         

通常我们会像上面这样,通过await来简化链式调用的负担,但是这样的话,我们对错误的处理就会变得很麻烦:


  • 统一使用一个大的try catch来捕获所有的错误

         

但是这样的话,我们就无法知道是哪个Promise出现了错误,无法保证后续的Promise能够正常执行。


  • 使用Promise.prototype.catch来捕获每个Promise的错误

         

这种方式就是我经常使用的方式,但是这样我需要为每一个Promise都写一个错误处理函数。

  • 链式处理

         

这种方式其实和使用一个大的try catch是一样的,不过还可以衍生出下面的方式:


         

显然这样很麻烦,然后还可以借助Promise.all或者Promise.race来简化:


         

当然Promise.all的特点大家都清楚,如果其中一个Promise出现错误,那么整个Promise都会失败,然后就有了Promise.race


         

这样的话,只要有一个Promise成功,那么整个Promise就会成功,弥补了Promise.all的不足。


当然还是有很多人不满足,因为懒是天性,就是不想写那么多的Promise,也不想写那么多的catch,于是就有了今天的主角await-to-js


源码分析



await-to-js的源码很简单,就是在内部对错误进行了处理,然后返回一个正确的promise


         

从代码上可以看到await-to-js的使用方式很简单,只需要在to函数中传入一个Promise,然后就可以得到一个数组,数组的第一个元素是错误信息,第二个元素是成功的数据。


         

它的第二个参数是一个对象,可以传入一些额外的信息,这个信息会被合并到错误信息中。


内部实现也很简单,就是我们上面讲过的错误处理方式其中一种,使用Promise.prototype.catch来捕获错误,然后返回一个正确的Promise


不过就是对返回的结果进行规范化处理,返回一个数组,第一个元素是错误信息,第二个元素是成功的数据。


使用


通过看源码我们就知道了await-to-js的使用方式,那么我们来看看它的使用场景:


         

怎么用自己舒服就怎么用,还可以探索别的使用方式,让操作骚起来。

总结


await-to-js的实现方式很简单,就是对一个promise进行错误处理,然后返回一个正确的promise;


但是部分人可能会对每次判空感觉很麻烦,那么可以考虑将这个方法修改一下,返回自己喜欢的方式就可以了。


例如将返回数组改为对象,通过错误码来判断是否成功,这样就可以不用每次都判空了。


或者再发挥自己过度封装的能力,将判空也封装起来,哈哈哈。


目录
相关文章
|
前端开发 JavaScript
web前端面试高频考点——JavaScript 篇(二)【JS 异步进阶】Event Loop、then 和 catch、async/await、宏任务微任务、手撕 Promise 源码
web前端面试高频考点——JavaScript 篇(二)【JS 异步进阶】Event Loop、then 和 catch、async/await、宏任务微任务、手撕 Promise 源码
178 0
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
81 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
53 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
77 0
前端学习案例13-promise源码实现5
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
63 0
前端学习案例13-promise源码实现5
|
前端开发 Java
从源码上理解Netty并发工具-Promise
最近一直在看Netty相关的内容,也在编写一个轻量级的RPC框架来练手,途中发现了Netty的源码有很多亮点,某些实现甚至可以用「苛刻」来形容。另外,Netty提供的工具类也是相当优秀,可以开箱即用。这里分析一下个人比较喜欢的领域,并发方面的一个Netty工具模块 - Promise。
261 0
从源码上理解Netty并发工具-Promise
|
前端开发
遵循Promises/A+规范,手把手带你实现Promise源码(核心篇)
遵循Promises/A+规范,手把手带你实现Promise源码(核心篇)
195 0
遵循Promises/A+规范,手把手带你实现Promise源码(核心篇)
|
前端开发
Promise源码解密-catch/resolve/reject/race
Promise源码解密-catch/resolve/reject/race
|
前端开发
Promise源码解密-then的链式调用
Promise源码解密-then的链式调用
|
前端开发
Promise源码解密-异步版
Promise源码解密-异步版
下一篇
DataWorks