详解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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
微信小程序之购物车功能
Sep 23 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
Vue 修改网站图标的方法
Dec 31 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
PHP中的Memcache详解
2014/04/05 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JQquery的一些使用心得分享
2012/08/01 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
有机童装:Toby Tiger
2018/05/23 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
英文自荐信
2013/12/19 职场文书
读书活动总结
2014/04/28 职场文书
新法人代表任命书
2014/06/06 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫