axios二次封装配置请求拦截器和响应拦截器

我们为什么要对axios进行二次封装?

因为我们可以使用请求拦截器在发送请求之前处理一些业务,使用响应拦截器在服务器数据返回后处理一些业务。

我们通常创建一个api文件夹,再创建一个request.js文件,用于存放重写后的axios。

// 引入axios
import axios from "axios";// 利用axios对象的create 方法去创建一个axios实例,我们可以对其进行配置
const requestObj = axios.create({// 基础路径:一般我们发送请求时都会出现apibaseURL: "/api",// 请求超时的时间timeout: 5000
});// 请求拦截器:在请求发送之前,请求拦截器检测到,也可以在请求发出去之前做一些事情
requestObj.interceptors.request.use((config) => {// config:配置对象,其中有headers请求头return config;
})// 响应拦截器
// 有成功请求函数和失败回调函数
requestObj.interceptors.response.use((res) => {// 成功回调函数:直接返回请求的数据return res.data;
}, (error) => {// 失败回调函数:返回一个Promise对象return Promise.reject(new Error('faile'));
})export default requestObj;

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

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

相关文章

SiP系统级封装、SOC芯片和合封芯片主要区别!合封和sip一样吗?

SiP系统级封装、SOC芯片和合封芯片技术是三种备受关注的技术。它们在提高系统性能、稳定性和功耗效率方面都发挥着重要作用 但在集成方式、应用领域和技术特点等方面存在一些区别。本文将从多个角度对这三种技术进行深入解读。 一、集成方式 合封芯片则是一种将多个芯片或不…

Vue弹窗的使用与传值

使用element-UI中的Dialog 对话框 vue组件结合实现~~~~ 定义html <div click"MyAnalyze()">我的区划</div><el-dialog title"" :visible.sync"dialogBiomeVisible"><NationalBiome :closeValue"TypeBiome" cl…

轻松入门Axios:前端开发中的HTTP利器

轻松入门Axios&#xff1a;前端开发中的HTTP利器 前言为什么选择Axios1. **简单易用:**2. **功能丰富:**3. **广泛支持的浏览器和环境:**4. **跨域支持:**5. **社区活跃:**6. **对于处理错误的友好性:**7. **对于并发请求的支持:** 安装与引用1. 使用 npm 安装 Axios&#xff1…

基于51单片机车载空调系统设计proteus仿真+源程序)

一、系统方案 1、本设计采用这51单片机作为主控器。 2、DS18B20采集温度值送到液晶1602显示。 3、按键设置报警值。 4、温度控制风扇档位。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /T0初始化*/ void init_t0() { //TMOD0x01;//定时器…

数据库实验三 Sql多表查询和视图

数据库实验三 Sql多表查询和视图 一、Sql表二、在线练习 一、Sql表 www.db-book.com 二、在线练习 对所有表执行查询语句&#xff0c;查看有哪些数据。 select * from tableName; 一、执行以下查询语句&#xff0c;写出查询意图。 (1) select * from student,takes whe…

经典滑动窗口试题(一)

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、将x减到0的最小操作数1、题目讲解2、讲解算法原理3、代码实现 二、无重复的最长子串1、题…

OpenCV数据类型及CV_16UC1深度图ros订阅

最近用到深度图,对其数据类型及显示有些迷惑,记笔记于此: 目录 一、cv::Mat 的数据类型及转换方式1. cv::Mat 数据类型2. cv::Mat 数据类型互转2.1 OpenCV数据类型转换的函数2.2 可视化深度图像(CV_16UC1)二、cv::Mat 与 sensor_msgs::msg::Image 互转(基于cv_bridge)1.…

黑臭水体的“黑”和“臭”形成的机理

水体“黑”和“臭”即呈现令人不悦的颜色和(或)散发令人不适气味的水体。由于水环境遭受超过其自净能力的有机污染&#xff0c;有机物的好氧分解使水体中耗氧速率大于复氧速率&#xff0c;造成水体缺氧&#xff0c;致使有机物降解不完全、速度减缓&#xff0c;厌氧生物降解过程…

mybatis 语法使用各种踩坑(持续更新中。。。)

1、大小写命名&#xff1a;这个别说了&#xff0c;都是泪。 2、联表查询查询&#xff0c;多条合成一条&#xff0c;不生效的原因 博主各种检查关联关系和字段大小写&#xff0c;本来是4条数据最后合成一条数据&#xff0c;死活给你直接返回了4条数据&#xff0c;而且每个类似p…

leetcode刷题之用栈实现队列(C语言版)

leetcode刷题之用栈实现队列&#xff08;C语言版&#xff09; 一、题目描述二、题目要求三、题目解析Ⅰ、typedef structⅡ、MyQueue* myQueueCreateⅢ、void myQueuePush(MyQueue* obj, int x)Ⅳ、int myQueuePeek(MyQueue* obj)Ⅴ、int myQueuePop(MyQueue* obj)Ⅶ、bool myQ…

邦芒忠告:求职者面试时绝不能说的8件事

求职者在面试时应该注意言行举止&#xff0c;避免提及一些敏感或不合适的话题&#xff0c;以下是一些绝不能说的事情&#xff1a; 1、攻击性言辞&#xff1a;不要使用攻击性言辞&#xff0c;如贬低、批评或攻击公司、同事或竞争对手等&#xff0c;这会给人留下不成熟、不尊重他…

新手必看!!附源码!!STM32通用定时器-比较输出PWM

一、什么是PWM? PWM&#xff08;脉冲宽度调制&#xff09;是一种用于控制电子设备的技术。它通过调整信号的脉冲宽度来控制电压的平均值。PWM常用于调节电机速度、控制LED亮度、产生模拟信号等应用。 二、PWM的原理 PWM的基本原理是通过以一定频率产生的脉冲信号&#xff0…

SPSS多元对应分析

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

红队攻防实战之钉钉RCE

我这一生如履薄冰&#xff0c;你说我能走到对岸吗&#xff1f; 本文首发于SecIN社区&#xff0c;原创作者即是本人 前言 网络安全技术学习&#xff0c;承认⾃⼰的弱点不是丑事。只有对原理了然于⼼&#xff0c;才能突破更多的限制。拥有快速学习能力的白帽子&#xff0c;是不…

vue3 教程(中)

侦听器 用于侦听指定变量&#xff0c;当其响应式状态变化时触发回调函数。 watch() watch() 需明确指定侦听的数据源&#xff0c;并且仅当数据源变化时&#xff0c;才会执行回调&#xff0c;在创建侦听器时&#xff0c;不会执行回调&#xff0c;可以获取到数据源变化前后的值…

Flutter 父子组件通信

在Flutter 中父组件调用子组件的方法可以通过GlobalKey实现&#xff0c;而子组件调用父组件方法可以通过回调函数实现。 父组件 class _MyHomePageState extends State<MyHomePage> {final GlobalKey<LoadPencilState> loadPencilKey GlobalKey<LoadPencilSt…

react中虚拟dom,diff,fiber - 初级了解

借鉴&#xff1a; 「React深入」一文吃透虚拟DOM和diff算法 - 掘金 (juejin.cn) 虚拟dom、fiber、渲染dom、dom-diff - 掘金 (juejin.cn) 未阅读源码&#xff0c;了解层面&#xff0c;后续可以深入了解 1.虚拟DOM ①.结构上&#xff1a;虚拟DOM比真实DOM轻很多 ②.操作上&…

主流的低代码平台有哪些?程序员应该如何与低代码相处?

本文主要阐述低代码的概念&#xff0c;介绍目前主流的低代码平台&#xff0c;总结低代码平台的典型特征、存在优势以及未来发展趋势。并站在程序员的角度&#xff0c;分析如何在已经到来的低代码战争中&#xff0c;找到自己的定位&#xff0c;一展所长。 什么是低代码&#xff…

脉冲宽度基础知识简介

脉冲宽度是指脉冲所能达到的最大值所持续的周期时间。脉冲宽度是电子领域中一个重要的概念&#xff0c;它与脉冲重复间隔和占空比等参数密切相关。 脉冲宽度通常用于电信号的测量&#xff0c;可以用来描述脉冲的形状、幅度和宽度等特性。在雷达和电源领域中&#xff0c;脉冲宽度…

Flink 替换 Logstash 解决日志收集丢失问题

在某客户日志数据迁移到火山引擎使用 ELK 生态的案例中&#xff0c;由于客户反馈之前 Logstash 经常发生数据丢失和收集性能较差的使用痛点&#xff0c;我们尝试使用 Flink 替代了传统的 Logstash 来作为日志数据解析、转换以及写入 ElasticSearch 的组件&#xff0c;得到了该客…