【源码共读】如何优雅的处理 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;


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


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


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


目录
相关文章
|
6天前
|
缓存 前端开发 JavaScript
整会promise这8个高级用法,再被问倒来喷我
整会promise这8个高级用法,再被问倒来喷我
整会promise这8个高级用法,再被问倒来喷我
|
6天前
|
前端开发 JavaScript
js开发:请解释Promise是什么,以及它如何解决回调地狱(callback hell)问题。
Promise是JavaScript解决异步操作回调地狱的工具,代表未来可能完成的值。传统的回调函数嵌套导致代码难以维护,而Promise通过链式调用`.then()`和`.catch()`使异步流程清晰扁平。每个异步操作封装为Promise,成功时`.then()`传递结果,出错时`.catch()`捕获异常。ES6的`async/await`进一步简化Promise的使用,使异步代码更接近同步风格。
23 1
|
6天前
|
存储 JSON 缓存
【源码共读】axios的46个工具函数
【源码共读】axios的46个工具函数
108 0
|
10月前
|
前端开发
Promise是什么?怎么用?
Promise 是一种异步编程的解决方案。它可以使异步操作更加清晰、简单、优雅,避免了回调地狱的问题。Promise 对象表示一个异步操作的最终完成或失败,并且它的最终状态(完成或失败)和返回值(或错误)不依赖于调用它的代码。
|
前端开发 JavaScript API
【温故知新】5 个 Promise 要避免的常见用法~
本瓜一直觉得 Promise 就是咱 JS 人的浪漫,没错,Promise 天天见,但或许越熟悉越陌生,我们在一直用的过程中会形成一些定式,这导致难免会漏掉一些定式以外的要点;
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
42 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
57 0
前端学习案例13-promise源码实现5
|
前端开发
前端学习案例12-promise源码实现4
前端学习案例12-promise源码实现4
54 0
前端学习案例12-promise源码实现4
|
前端开发
前端学习案例13-promise源码实现5
前端学习案例13-promise源码实现5
48 0
前端学习案例13-promise源码实现5
|
前端开发
前端学习案例12-promise源码实现3
前端学习案例12-promise源码实现3
43 0
前端学习案例12-promise源码实现3