详解Axios统一错误处理与后置


Posted in Javascript onSeptember 26, 2018

问题

在进行业务开发的时候,前后端会对接口的数据结构进行约定,若接口有异常,需要将异常信息展示给用户知晓。这个流程里,数据结构是确定的(事先约定),数据的处理逻辑是相同的(展示给用户),如果在业务代码代码中重复的catch(e) { 展示给用户 },就非常的不优雅。本着Don't repeat myself(懒)的原则,需要对接口错误进行统一处理。

接下来,我会结合具体的业务场景,讲一讲我的解决方案。

业务场景

  1. 后端通过http状态标识接口状态,错误信息在response的data里
  2. 前端的处理逻辑是使用element-ui的Message展示错误信息
  3. 使用axios

axios可以通过拦截器,在业务代码处理响应之前对响应进行处理,类似于下面的流程

someAPI()
  .then(interceptorsFn)
  .then(业务逻辑)

所以,我们可以在interceptors对响应进行统一处理:

request.interceptors.response.use(
  (response) => response.data,
  (error) => {
    // 针对特定的http状态码进行处理
    if (error.response && error.response.status === 401) {
      router.push({ name: 'ssoLogin' })
      return new Promise(() => {}) // pending的promise,中止promise链
    }

    .....

    const msg = error.response.data
    Message.error(msg)

    return Promise.reject(error.response)
  }
)

如何进行特定的错误处理

不难看出,上面的方案有一个问题,如果有某个接口需要有业务代码来展示定制的错误信息(这个情况十分常见),如何处理?

naive方案1:业务代码使用其它的方式展示信息:例如Notify。
这个方案被我司产品痛骂,因为破坏了统一的错误信息展示,并且此时统一的错误信息是一个垃圾信息,没必要展示。

naive方案2:业务代码直接使用Message,顶掉统一的错误信息。
这个方案还是被产品大哥(dog)怼了,因为明显的用户体验不好,错误信息出现了闪烁。

帅气的解决方案3:业务代码决定是否隐藏统一错误提示
那么问题来了,由于是先走拦截器,再走业务代码,如何由业务代码决定是否隐藏统一错误提示呢?

我的办法是,将统一的错误提示使用setTimeout放到下一个loop执行,并通过一个变量标识是否要执行统一错误提示。

request.interceptors.response.use(
  (response) => response.data,
  (error) => {
    ...
    setTimeout(() => {
      if (tag) {
        Message.error(msg)
      }
    })
  }
)

接下来,需要考虑的是,如何在业务代码里改变标识变量

naive方案1:一个全局的变量或者方法

这个方案非常的不靠谱,若在其它代码里改变了这个全局变量,就嗝屁,并且N个接口公用一个标识变量,只能是同一个状态。

帅气方案2:

request.interceptors.response.use(
  (response) => response.data,
  (error) => {
    ...
    let isShowNormalError = true
    const hideNormalError = () => isShowNormalError = false

    setTimeout(() => {
      if (isShowNormalError) {
        Message.error(msg)
      }
    })

    return Promise.reject({ ...error.response, hideNormalMessage }) // 在error.response上添加方法
  }
)

业务代码:

someAPIFN()
  .then()
  .catch({ data, hideNormalMessage }) {
    // 业务代码
    hideNormalMessage()
  }

兼容旧代码

目前的方案需要对现存代码做修改,对进行特殊处理的接口添加hideNormalMessage()。如果不想全局搜索添加代码(懒),可以根据业务来进行兼容。下面讲一下我结合业务代码进行的兼容处理(非常不推荐)。

request.interceptors.response.use(
  (response) => response.data,
  (error) => {
    // warning,和业务代码深度耦合,不推荐
    const hasMessageBeforeCatch = !!document.querySelector('.el-message')
    
    ...

    let isShowNormalError = true
    const hideNormalError = () => isShowNormalError = false

    setTimeout(() => {
      const hasMessageAfterCatch = document.querySelector('.el-message')

      // 调用catch前没有message,调用catch后有message,表示message是在catch过程中产生
      const madeMessageWhenCatch = !hasMessageBeforeCatch && hasMessageAfterCatch

      if (isShowNormalError && !madeMessageWhenCatch) {
        Message.error(msg)
      }
    })

    return Promise.reject({ ...error.response, hideNormalMessage }) // 在error.response上添加方法
  }
)

逻辑:如果在catch中使用了Message,就不展示统一错误处理

总结

这个解决方案的关键在于使用setTimeout使得统一错误处理“落后”于业务代码,并在Promise.reject的参数中添加控制函数使得业务代码可以决定是否展示统一错误处理。稍作抽象与封装就可以形成一个业务无关、框架无关的统一错误处理方案。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 #Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 #Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 #Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 #Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 #Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
You might like
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
js实现日历的简单算法
2017/01/24 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
python线程、进程和协程详解
2016/07/19 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
数组越界问题
2015/10/21 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
优秀大学生的自我评价
2014/01/16 职场文书
五年级数学教学反思
2014/02/11 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
药店营业员岗位职责
2015/04/14 职场文书
教师节感想
2015/08/11 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android