axios 请求和响应拦截器

1. 创建实例

使用 axios.create() 使用自定义配置创建一个 axios 实例。

const $http = axios.create({timeout: 1000,headers: {'Content-Type': 'application/json',}
})

2. 拦截器

在请求或响应被 then 或者 catch 处理前拦截他们,拦截分为请求拦截和响应拦截。

// 添加请求拦截器
$http.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
$http.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});

2.1 request 拦截器,全局添加市场信息

$http.interceptors.request.use(config => {......// 市场编码if (config.data && Object.prototype.toString.call(config.data) === '[object Object]' && typeof config.data !== 'string') {if (!config.data.removeMarketCode) {const market = store.state.common.market || {}config.data.marketId = market.keyconfig.data.marketName = market.val} else {delete config.data.removeMarketCode}}return config
}, error => {// Do something with request errorPromise.reject(error)
})
  • removeMarketCode 是否移除市场信息,默认不移除;

根据上述代码可以看到,市场信息都是默认添加在 config.data 对象中下的,如果我们需要调整传参对象的位置时,那需要更改上述逻辑,具体代码如下:

if (!config.data.removeMarketCode) {// 指定 data 下某个路径const key = config.data?.targetconst market = store.state.common.market || {}const marketObj = { marketId: market.key, marketName: market.val }if (key) {config.data[key] = { ...config.data[key], ...marketObj }delete config.data.target} else {config.data = { ...config.data, ...marketObj }}
} else {delete config.data.removeMarketCode
}

使用如下:

class BillManage {export (params) {return axios.post(URL.receivePayBill.export, { ...params, target: 'condition' })}
}
export default new BillManage()// 实际传参
{ "columns": [...], "condition": { "isPay": false, "marketId": "000", "marketName": "白糖" } }

2.2 response 拦截器

通过响应拦截器我们用来处理响应异常的接口进行拦截提示,返回对象中会返回一个 succeed 字段来表示接口处理正常还是异常情况,当然也有可能直接返回文件流,因此这里使用的 ‘succeed’ in res 的写法来表示 res 中是否存在 succeed 的 key 来代替 res.succeed。

// response 拦截器
$http.interceptors.response.use(response => {......const res = response.dataif ('succeed' in res && res.succeed !== true) {notification.error({message: 'Error',description: res.errorMsg,})return Promise.reject(new Error(res.errorMsg || 'error'))} else {return response.data}},error => {return Promise.reject(error)}
)

导出文件里处理如下:

class ReceivePayAccountManage {// 下载模板payOrderImportTmpl (params) {return axios.post(URL.receivePayOrder.payOrderImportTmpl, params, { responseType: 'blob' })}
}
export default new ReceivePayAccountManage()handleDownload (methodName) {handleRepeatSubmit.call(this, null, () => config.methods[methodName].handler(), (data) => downloadPDF('应付单导入模板.xlsx', data))
},

downloadPDF 方法传入文件名和文件流,下载文件信息处理,具体代码如下:

export const downloadPDF = function (fileName, blob) {const downloadElement = document.createElement('a')const href = window.URL.createObjectURL(blob)downloadElement.href = hrefdownloadElement.download = fileNamedocument.body.appendChild(downloadElement)downloadElement.click()document.body.removeChild(downloadElement)window.URL.revokeObjectURL(href)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/73703.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序电影票订票小程序软件设计与实现

摘 要 我们的生活水平正在不断的提高,然而提高的一个重要的侧面表现就是更加注重我们的娱乐生活。电影是我们都喜欢的一种娱乐方式,各式各样的电影给我们带来的喜悦也是大不相同的。带来快乐的同时也因为其复杂、繁琐的流程让电影爱好者们变得烦躁起来。…

以太坊虚拟机

1.概述 以太坊虚拟机 EVM 是智能合约的运行环境。它不仅是沙盒封装的,而且是完全隔离的,也就是说在 EVM 中运行代码是无法访问网络、文件系统和其他进程的。甚至智能合约之间的访问也是受限的。 2.账户 以太坊中有两类账户(它们共用同一个…

人大金仓分析型数据库备份和恢复(三)

目录 备份或恢复过滤内容 过滤叶子分区 使用gprestore过滤 备份或恢复过滤内容 gpbackup备份指定数据库中的所有schema和表,除非您使用schema级别或表级别过滤器选项排除或包含单个schema或表对象。 schema级别选项是--include-schema或--exclude-schema命令行选…

​@Cacheable 注解​

1. 功能说明 Cacheable 注解在方法上,表示该方法的返回结果是可以缓存的。也就是说,该方法的返回结果会放在缓存中,以便于以后使用相同的参数调用该方法时,会返回缓存中的值,而不会实际执行该方法。 注意,这…

华为云API对话机器人CBS的魅力—实现简单的对话操作

云服务、API、SDK,调试,查看,我都行 阅读短文您可以学习到:人工智能AI智能的问答管理、全面的对话管理、高效训练部署 1.IntelliJ IDEA 之API插件介绍 API插件支持 VS Code IDE、IntelliJ IDEA等平台、以及华为云自研 CodeArts …

Unity 2018发布在iOS 16.3偶尔出现画面不动的问题

1)Unity 2018发布在iOS 16.3偶尔出现画面不动的问题 2)IL2CPP在Xcode下增量编译问题 3)帧同步实现PuppetMaster布娃娃系统的问题 这是第351篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖了UWA问答、社区帖子等…

每日刷题-3

目录 一、选择题 二、编程题 1、计算糖果 2、进制转换 一、选择题 1、 解析:在C语言中,以0开头的整数常量是八进制的,而不是十进制的。所以,0123的八进制表示相当于83的十进制表示,而123的十进制表示不变。printf函数…

ASP.NET Core IOC容器

//IOC容器支持依赖注入{ServiceCollection serviceDescriptors new ServiceCollection();serviceDescriptors.AddTransient<IMicrophone, Microphone>();serviceDescriptors.AddTransient<IPower, Power>();serviceDescriptors.AddTransient<IHeadphone, Headp…

【SQL应知应会】索引 • Oracle版:B-树索引;位图索引;函数索引;单列与复合索引;分区索引

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享,与更多的人进行学习交流 本文免费学习,自发文起3天后,会收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习,有基础也有进阶,有MySQL也有Oracle 索引 • MySQL版 前言一、Oracle索引1.索引概述及分类…

upload-labs1-17思路

1 直接写一个php文件测试一下&#xff0c;发现弹窗不让上传 原理很简单&#xff0c;就是把后缀名拿出来过滤一遍&#xff0c;而白名单就是弹窗的这三个 解决方法&#xff1a; 因为这是在前端防御的一个手段&#xff0c;所以直接在浏览器设置上禁用js就行了&#xff1a; 也可…

springboot整合neo4j--采用Neo4jClient和Neo4jTemplate方式

1.背景 看了spring-boot-starter-data-neo4j的源码之后发现&#xff0c;该starter内已经实现了Neo4jClient和Neo4jTemplate&#xff0c;我们只需要使用Autowire就能直接使用它操作neo4j。 Neo4jClient方式与我的另一篇springboot整合neo4j-使用原生cypher Java API博客方式一样…

java与hadoop中正则表达式有什么区别

Java和Hadoop中的正则表达式有一些区别&#xff0c;主要体现在以下几个方面&#xff1a; 语法差异&#xff1a;Java中的正则表达式遵循Java的正则表达式语法&#xff0c;而Hadoop中的正则表达式基于Google的RE2库实现&#xff0c;语法稍有不同。例如&#xff0c;在Java中使用\d…

Springboot整合Neo4J图数据库

1.引入依赖 JDK11&#xff0c; neo4J4.4.23 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.15</version><relativePath/> <!-- lookup parent …

机器学习笔记 - 【机器学习案例】基于KerasCV的预训练模型自定义多头+多标签预测

一、KerasCV KerasCV 是一个模块化计算机视觉组件库,可与 TensorFlow、JAX 或 PyTorch 原生配合使用。这些模型、层、指标、回调等基于Keras Core构建,可以在任何框架中进行训练和序列化,并在另一个框架中重复使用,而无需进行昂贵的迁 KerasCV 可以理解为 Keras API 的水平…

微服务-OpenFeign基本使用

一、前言 二、OpenFeign基本使用 1、OpenFeign简介 OpenFeign是一种声明式、模板化的HTTP客户端&#xff0c;它使得调用RESTful网络服务变得简单。在Spring Cloud中使用OpenFeign&#xff0c;可以做到像调用本地方法一样使用HTTP请求访问远程服务&#xff0c;开发者无需关注…

AUTOSAR知识点 之 ECUM (三):ECUM的ISOLAR-AB配置及代码解析

目录 1、概述 2、ISOLAR-AB配置 2.1、EcuMGeneral 2.2、EcuMConfiguration 2.2.1、EcuMDefaultShutdownTarget 2.2.2、EcuMDriverInitListOne

stm32 学习笔记:GPIO输出

一、GPIO简介 引脚电平 0-3.3V,部分可容忍5V&#xff0c;对输出而言最大只能输出3.3V, 只要可以用高低电平来控制的地方&#xff0c;都可以用GPIO来完成&#xff0c;如果控制的功率比较大的设备&#xff0c;只需加入驱动电路即可 GPIO 通用输入输出口&#xff0c;可配置为 8种 …

2023国赛数学建模E题思路代码 - 黄河水沙监测数据分析

# 1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…

【实训】“宅急送”订餐管理系统(程序设计综合能力实训)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 大一小学期&#xff0c;我迎来了人生中的第一次实训…

Navicat 使用教程

下述内容是基于已经安装了MySQL和Navicat的基础上的。若是没有安装&#xff0c;可参考下述内容进行安装。 【MySQL 8.0.34安装教程】&#xff1a; MySQL 8.0.34安装教程_西晋的no1的博客-CSDN博客 【Navicat16安装教程】&#xff1a; Navicat16安装教程_西晋的no1的博客-CSDN博…