关于前端:umirequest-统一异常处理实践

首发于语雀文档

前言

自己在工作中用到了 umi-request，百度谷歌搜了一遍，感觉都没找到超过 3 篇适合且含代码的文章，因而只能自行实际总结了。

umi-request 有点不同

umi-request 与 axios & xhr 不太一样，它是基于 fetch 实现的，因而它只有在网络谬误的状况下，才会抛出谬误（即：catch），即便接口返回的是 404/500 等谬误。

umi-request 自带提供一个谬误处理函数 errorHandler，所有在 umi-request 中执行的代码如果抛出谬误，都会被捕捉。

参考：
https://github.com/umijs/umi-request/blob/master/README_zh-CN.md# 错误处理

对立异样解决

官网文档中提供的 errorHandler 示例比较简单，只简略判断了所抛谬误 error 是否有 response 属性（比如说网络谬误这个场景，error 中就是没有 response 属性）。
这就容易呈现一个问题：代码执行出错（比方获取不到内部传入的参数），它所抛的 error 也是没有 response 属性。。。

我感觉目前其实还挺简略的，次要搞清楚以下两点：

1. 谬误捕捉程序
2. 自定义 Error，扩大 Error

谬误捕捉程序

1. 产生谬误

2. errorHandler（是个 Promise）

   1. 如果抛出谬误或 reject，则进入下一个 Promise 的 catch，即：request(“”,{}).then().catch()
   2. 否则进入下一个 Promise 的 then，即：request(“”,{}).then()

自定义 Error，扩大 Error

我心愿能判断辨别以下几类谬误：

1. 网络谬误
2. HTTP 谬误
3. 接口谬误
4. 其余谬误（如代码执行谬误）

那就应用 ES6 Class 继承一下 Error 进行封装。

参考：
https://zh.javascript.info/custom-errors

后续

后续还能够再简单一点，自定义扩大一下申请谬误和响应谬误以示辨别，不过应该都差不多。

Github

github 上的代码是自己的一整套 umi-request 实际，并非只含 umi-request 错误处理

https://github.com/blueju/umi-request-practice