返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解如何消除axios拦截中的if
  • 907
分享到

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

2024-04-02 19:04:59 907人浏览 八月长安
摘要

目录基本拦截设计轮子思考方向轮子骨架详细实现实践总结基本拦截 axiOS的响应错误拦截中,难免会对error.status做各种各样的if判断,又或者switch。为了防止枯燥乏味的

基本拦截

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
  }
  
  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的文章就介绍到这了,更多相关消除axios拦截的if内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解如何消除axios拦截中的if

本文链接: https://lsjlt.com/news/146246.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解如何消除axios拦截中的if
    目录基本拦截设计轮子思考方向轮子骨架详细实现实践总结基本拦截 axios的响应错误拦截中,难免会对error.status做各种各样的if判断,又或者switch。为了防止枯燥乏味的...
    99+
    2024-04-02
  • 怎么消除axios拦截中的if
    今天小编给大家分享一下怎么消除axios拦截中的if的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。基本拦截axios的响应错...
    99+
    2023-06-30
  • Vue3中axios请求封装、请求拦截与相应拦截详解
    目录前言axios请求封装请求拦截和响应拦截接口的请求总结前言 对于三者放在Service.js中封装,方便使用 axios.create 的作用是创建一个新的 ...
    99+
    2023-05-19
    vue axios封装 axios请求封装 axios请求拦截
  • vue中Axios如何添加拦截器刷新token
    这篇文章将为大家详细讲解有关vue中Axios如何添加拦截器刷新token,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Axios是一款网络前端请求框架,基本用法如下:1. Axios基本用法: ...
    99+
    2023-06-29
  • Vue3 Axios拦截器封装成request文件的示例详解
    可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。 以下是一个示例,展示如何将Axios拦截器封装成一个request文件: 1、创建一个名为r...
    99+
    2023-05-17
    Vue3 Axios拦截器 Vue3 Axios拦截器封装 Vue3 Axios request文件
  • Springboot如何利用拦截器拦截请求信息收集到日志详解
    目录1、需求2、问题2、获取1)导入依赖为了获取客户端类型、操作系统类型、ip、port2)封装获取body字符串的工具类3)拦截器类4)继承 HttpServletRequestW...
    99+
    2024-04-02
  • 在springboot中使用拦截器的步骤详解
    目录在springboot中使用拦截器1. 定义拦截器2. 使用JavaConfig注册拦截器3. 定义控制器,测试拦截器4. 总结在springboot中使用拦截器 拦截器Inte...
    99+
    2024-04-02
  • 详解MySQL 幻读及如何消除
    这是一篇数据库隔离级别的科普文章,旨在了解数据库中著名的幻读现象,为了专注,对脏读、不可重复读不作讨论。 事务隔离级别 MySQL有四级事务隔离级别: 读未提交 READ-UNCOMMITTED: 存在脏读,不可...
    99+
    2022-05-29
    MySQL 幻读 MySQL 幻读消除
  • 详解MySQL幻读及如何消除
    目录事务隔离级别 什么是幻读 如何消除幻读 总结 这是一篇数据库隔离级别的科普文章,旨在了解数据库中著名的幻读现象,为了专注,对脏读、不可重复读不作讨论。 事务隔离级别 MySQL...
    99+
    2024-04-02
  • 详解SpringMVC中拦截器的概念及入门案例
    目录一、拦截器概念二、拦截器入门案例一、拦截器概念 拦截器(Interceptor)是一种动态拦截方法调用的机制,在SpringMVC中动态拦截控制器方法的执行 作用: 在指定的方法...
    99+
    2024-04-02
  • 详解SpringBoot中自定义和配置拦截器的方法
    目录1.SpringBoot版本2.什么是拦截器3.工作原理4.拦截器的工作流程4.1正常流程4.2中断流程5.应用场景6.如何自定义一个拦截器7.如何使其在Spring Boot中...
    99+
    2024-04-02
  • Vue中设置登录验证拦截功能的思路详解
    目录一、解决思路二、让浏览器存储服务器返回的token三、在请求中设置访问权限四、封装登录验证Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和spring...
    99+
    2024-04-02
  • Java如何实现消消乐中的消除功能
    这篇文章主要介绍Java如何实现消消乐中的消除功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下有n行m列矩阵,每个位置的元素取值(1~9),同一行或者同一列中如果有三个以及三个以上的数字相同时,将改相同...
    99+
    2023-06-20
  • 如何使用Java8中的Function接口消灭if...else
    这篇文章给大家分享的是有关如何使用Java8中的Function接口消灭if...else的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在开发过程中经常会使用if...else...进行判断抛出异常、分支处理等操...
    99+
    2023-06-29
  • 如何让js中的if判断如丝般顺滑详解
    目录前言代码实现思路一思路二总结参考文档前言 项目中的一个小需求点,点击按钮,验证几十个条件框,判断所有条件框是否填写(选择)过数据(至少有一个条件判断为真)再执行对应操作 判断的...
    99+
    2024-04-02
  • JavaScript 中如何拦截全局 Fetch API 的请求和响应问题
    目录JavaScript Fetch API实现拦截对 Fetch 使用猴子补丁(monkey patching)请求拦截器响应拦截器错误处理Node.js使用 fetch-inte...
    99+
    2023-01-06
    js拦截全局Fetch API js拦截全局 js拦截全局请求和响应
  • 如何理解MySQL中的截断
    这期内容当中小编将会给大家带来有关如何理解MySQL中的截断,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 MySQL中的undo截断还是一...
    99+
    2024-04-02
  • 如何在拦截器中获取url路径里面@PathVariable的参数值
    目录在拦截器中获取url路径里@PathVariable参数值解决办法示例接口完整示例spring @PathVariable:请求路径url 上有变量值,通过@PathVariab...
    99+
    2024-04-02
  • 项目中如何使用axios过滤多次重复请求详解
    目录一、前言:这个情况下,我们通常的做法有两种:二、CancelToken类最终效果总结一、前言: 我们在web应用开发过程当中,经常会遇到一个时刻发起了多个请求的场景 这个情况...
    99+
    2024-04-02
  • Redis中过期键如何删除示例详解
    目录前言Redis 中 key 的过期删除策略1、定时删除2、惰性删除3、定期删除Redis 中过期删除策略从库是否会脏读主库创建的过期键内存淘汰机制内存淘汰触发的最大内存有哪些内存...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作