详解如何消除axios拦截中的if

 更新时间:2022年04月17日 09:59:15   作者:科目三后吃饭  
在使用vue的开发中,我们会使用axios来做前后端通信,那这时候我们就需要对请求前后做拦截,下面这篇文章主要给大家介绍了关于如何消除axios拦截中if的相关资料,需要的朋友可以参考下

基本拦截

axios的响应错误拦截中,难免会对error.status做各种各样的if判断,又或者switch。为了防止枯燥乏味的生活(给自己挖坑,换一种姿势去写拦截

// 以下大概是日常碰到的操作,拦截响应,判断status做相应操作
function login () {
  console.log('登陆逻辑')
  return promise.reject(error)
}
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  if (error.status === 401) {
    // 401重新登录
    console.log('未登陆')
    return login(error)
  } else if (error.status === 404) {
    console.log('404-什么都没')
    return promise.reject(error)
  } else if (error.status === 422) {
    console.log(error.response.data.message)
    return promise.reject(error)
  } else if (error.status === 500) {
    console.log('服务器内部错误')
    return promise.reject(error)
  } else {
    // 其他请求,直接抛出让业务去处理
    return promise.reject(error)
  }
});

设计轮子

思考方向

首先思考下怎么实现这个东西

  • 需要一个在内部消化if的逻辑判断
  • 根据判断去执行相应的逻辑,意味着我们要在内部维护一个逻辑数组(以下称为管道数组),配合成功后即触发对应管道。所以在开始调用函数去执行前,先要收集好管道。这个方法需要传一个标记(用来判断是否匹配)和回调函数(匹配成功后的逻辑)
  • 除了传标记,需要传一个payload(例如拦截中的error)参数,payload可以让我们在回调函数做出更多的对应操作
  • 在最后再添加一个default函数来收集匹配失败后的函数。

现在,已经在心中拟好了一个小轮子的五脏六腑。

轮子骨架

// 定义个一个class
class Enterclose {
  constructor () {
    // 维护管道数组
    this.pond = {}
    // 默认管道
    this._default = null
  }
  /**
   * 收集管道
   * callback(payload)
   * @param {any} sign 标记
   * @param {Function|Object} callback 回调函数|函数this
   * @return this
   * */
  use (sign, callback) {
    return this
  }
  /**
   * 收集匹配失败的管道
   * callback(payload)
   * @param {Function} callback 回调函数|函数this
   * @return this
   * */
  default (callback) {
    this._default = callback
    return this
  }
  /**
   * 执行管道流
   * @param {any} sign 标记
   * @param {any} payload
   * @return
   */
  start (sign, payload) {
  }
}

详细实现

以上把基本的api骨架写好,然后再一个一个慢慢实现内部的逻辑。

首先是use,用来收集管道,需求中标记是唯一的,所以我们的this.ponds的结构是{标记: callback}

use (sign, callback) {
    this.ponds[sign] = callback
    return this
}

其中我们需要一个方法用来启动Enterclose

通过getCallback函数去筛选和标记匹配的管道,返回对应的函数。这样一个消除if的小轮子就搞好啦

start (sign, payload) {
    const fn = this.getCallback(sign)
    if (fn) {
      return fn(payload)
    }
}
/**
* 根据标记获取函数
* @param {*} sign 
* @return {Function}
*/
getCallback (sign) {
    const key = Object.keys(this.ponds).find(key => key === sign)
    if (key) {
      return this.ponds[key]
    } else if (this._default) {
      return this._default
    }
}

实践

创建实例,用use和default收集管道,然后在拦截中通过start触发判断

const enterclose = new Enterclose()
// 收集管道
enterclose
.use(401, function (error) {
  console.log('未登陆')
  return login(error)
})
.use(404, function (error) {
  console.log('404-什么都没')
  return promise.reject(error)
})
.use(429, function (error) {
  console.log(error.response.data.message)
  return promise.reject(error)
})
.use(500, function (error) {
  console.log('服务器内部错误')
  return promise.reject(error)
})
.default(function (error) {
  // 收集默认管道
  return promise.reject(error)
})
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 启动
  return enterclose.start(error.status, error)
});

你也可以根据自己的场景做一些调整,例如支持Promise啊,或者说加一个finally函数,每次走管道最后都会调用这个回调函数之类

总结

到此这篇关于如何消除axios拦截中if的文章就介绍到这了,更多相关消除axios拦截的if内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现求出一个字符串中最多出现的字符和个数

    JS实现求出一个字符串中最多出现的字符和个数

    这篇文章主要为大家介绍了字符串中最多的重复字符的计算代码,需要的朋友可以参考下
    2007-07-07
  • TypeScript中的类型断言和非空断言的使用方法

    TypeScript中的类型断言和非空断言的使用方法

    类型断言是一种方式,可以手动指定变量的类型,非空断言是一种类型断言的特殊形式,这篇文章主要给大家介绍TypeScript 中的类型断言和非空断言的使用方法,需要的朋友可以参考下
    2023-07-07
  • js中获取时间new Date()的全面介绍

    js中获取时间new Date()的全面介绍

    下面小编就为大家带来一篇js中获取时间new Date()的全面介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript使用二分查找算法在数组中查找数据的方法

    JavaScript使用二分查找算法在数组中查找数据的方法

    这篇文章主要介绍了JavaScript使用二分查找算法在数组中查找数据的方法,较为详细的分析了二分查找法的原理与javascript实现技巧,需要的朋友可以参考下
    2015-04-04
  • js 毫秒转天时分秒的实例

    js 毫秒转天时分秒的实例

    下面小编就为大家分享一篇js 毫秒转天时分秒的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • js怎么只刷新当前页面一次

    js怎么只刷新当前页面一次

    Javascript刷新页面的几种方法:location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新当前页面一次呢
    2023-09-09
  • 浅析上传头像示例及其注意事项

    浅析上传头像示例及其注意事项

    本文主要分享一个简易的上传头像示例以及其大致流程、实现过程中需要注意的事项。具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JS 使用 window对象的print方法实现分页打印功能

    JS 使用 window对象的print方法实现分页打印功能

    这篇文章主要介绍了JS 使用 window对象的print方法实现分页打印功能,这种方法兼容性比较好,在ie和火狐浏览器下都可以正常使用,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法

    autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法

    这篇文章主要介绍了autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法,本文通过图文并茂实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • Bootstrap布局之栅格系统学习笔记

    Bootstrap布局之栅格系统学习笔记

    这篇文章主要为大家详细介绍了Bootstrap布局之栅格系统的学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论