首发于语雀文档

前言

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

<a name="AeA5o"></a>

umi-request 有点不同

umi-request 与 axios & xhr 不太一样，它是基于 fetch 实现的，因此它只有在网络错误的情况下，才会抛出错误（即：catch），即使接口返回的是 404/500 等错误。<br /> <br />umi-request 自带提供一个错误处理函数 errorHandler，所有在 umi-request 中执行的代码如果抛出错误，都会被捕获。

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

<a name="pbywf"></a>

统一异常处理

官方文档中提供的 errorHandler 示例比较简单，只简单判断了所抛错误 error 是否有 response 属性（比如说网络错误这个场景，error 中就是没有 response 属性）。<br />这就容易出现一个问题：代码执行出错（比如获取不到外部传入的参数），它所抛的 error 也是没有 response 属性。。。<br /> <br />我觉得目前其实还挺简单的，主要搞清楚以下两点：

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

<a name="kVqvo"></a>

错误捕获顺序

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

自定义 Error，扩展 Error

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

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

<br />那就使用 ES6 Class 继承一下 Error 进行封装。<br /> <br />参考：<br />https://zh.javascript.info/custom-errors <a name="tePCw"></a>

后续

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

<a name="57VLk"></a>

Github

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

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