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

你可能感兴趣的:(前端,react.js,umi,javascript,axios)