怎么消除axios拦截中的if

今天小编给大家分享一下怎么消除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函数来收集匹配失败后的函数。

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

轮子骨架

// 定义个一个classclass Enterclose {  constructor () {    // 维护管道数组    this.pond = {}    // 默认管道    this._default = null  }    use (sign, callback) {    return this  }    default (callback) {    this._default = callback    return this  }    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)    }}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”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。