Redux-Saga中的异常处理

Alan He
Alan He
Sep 8 · 4 min read

Redux-Saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的 library,它的目标是让副作用管理更容易,执行更高效,测试更简单,在处理故障时更容易。

不可避免的是,effects中可能会出现异常,比如一个call API请求,对于异常我们又该如何处理呢。这篇文章聚焦于将这点。

贴一个effects,连续 三次 call后端。

假如 第二次 请求即getBooks出错,还会打印step 2吗?

事实是不会,也就是请求异常,整个程序effects执行就会中断。

在effects中对于异常,我们需要使用trycatch

如上,getBooks请求进行了异常捕捉,这样做就可以吞掉这个错误,进而可以正常执行接下来的请求了。

什么算异常?

对于一个后端请求,200,400,404,500都是常见response code,那么什么请求才会在异常中要捕获?

Demo中我使用的Axios,so这里要看它了。开启源码阅读,源码中有个validateStatus函数,具体实现如下。可以看出200到300之间的正常,其它的抛出异常,300段的浏览器在接收后都会自行重定向。就是说我们400,500的错误才会在catch中捕获。

要看axios相关源码 戳这里

单个请求报错,effetcts也会挂掉,进而整个Saga树挂掉,整个App可能崩溃,那么为了确保WEB安全,我们需要让effects健壮些,so我们来做个wrapper。

effects上挂载wrapper

单个effects异常,整个saga都不会继续run

如上,我们增加saga 打印信息,在组件中,我们连续调用两次同一个action

查看日志,会发现其实,打印信息只有一个

造个捕捉异常轮子

很多时候,我们为了确保系统的健壮性,需要保证,单个effects执行出现故障后,不影响其它的执行,so,增加wrapper。

然后在effects中调用

效果

即使第一个effects出现问题,并不会影响第二个的执行

如上,对于单个effect增加safe函数,挺方便。但有没有一劳永逸的办法呢?毕竟safe很多的话,一眼望去不都是重复代码嘛!说好的 DRY

经过询问大神及查看Saga源码,找到了办法

如上进行设定,对于单个effect就不需要加safe了,一劳永逸。

  1. 我们是可以增加safe确保报错不影响其它saga执行,但是想想,为什么会报错,异常就一定是不安全,而不报错就是安全了吗?我们容错的同时,其实是掩盖了问题,从而降低了应用的安全性,假如不加safe,我们利用程序解决了这个不该爆发的错误不是更好吗?这点值得我们想想。
  2. 不论是saga还是其它类库,轮子虽好,但都有这样那样的问题,我们除了熟悉轮子解决我们的业务问题外,更多的是思考其背后的原理和适当造些更趁手的轮子吧。加油!

Alan He

Written by

Alan He

Develop with pleasure!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade