首发于语雀文档

前言

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

我觉得目前其实还挺简单的，主要搞清楚以下两点：

错误捕获顺序
自定义 Error，扩展 Error

错误捕获顺序

发生错误
errorHandler（是个 Promise）
1. 如果抛出错误或 reject，则进入下一个 Promise 的 catch，即：request("",{}).then().catch()
2. 否则进入下一个 Promise 的 then，即：request("",{}).then()

自定义 Error，扩展 Error

我希望能判断区分以下几类错误：

网络错误
HTTP 错误
接口错误
其他错误（如代码执行错误）

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

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

后续

后续还可以再复杂一点，自定义扩展一下请求错误和响应错误以示区分，不过应该都差不多。

Github

github 上的代码是本人的一整套 umi-request 实践，并非只含 umi-request 错误处理

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

巴特西

umi-request 统一异常处理实践

前言

umi-request 有点不同

统一异常处理

错误捕获顺序

自定义 Error，扩展 Error

后续

Github

最新文章

热门文章