umi-request 统一异常处理实践

首发于语雀文档

前言

本人在工作中用到了 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