详解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实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
js+html获取系统当前时间
Nov 10 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
js重写方法的简单实现
2016/07/10 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
JS设计模式之惰性模式(二)
2017/09/29 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
Django Admin 实现外键过滤的方法
2017/09/29 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
linux比较文件内容的命令是什么
2015/09/23 面试题
金融专业应届生求职信
2013/11/02 职场文书
合伙协议书范本
2014/04/21 职场文书
团队激励口号
2014/06/06 职场文书
社保委托书怎么写
2014/08/02 职场文书
平面设计师岗位职责
2014/09/18 职场文书
共青团员自我评价
2015/03/10 职场文书
优秀志愿者感言
2015/08/01 职场文书
关于车尾的标语大全
2015/08/11 职场文书
新年寄语2016
2015/08/17 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis