当前位置: 首页 > news >正文

vue3中axios添加请求和响应的拦截器

本章主要是以记录为主。

在src创建一个utils文件夹,并在utils中创建一个request.js文件。

// 引入axios
import axios from "axios";
// import qs from "qs";
// 创建axios实例
const instance = axios.create();
// 请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);
// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);
// 导出实例
export default instance;

这段代码主要是使用 axios 来创建一个 HTTP 客户端实例,并添加请求和响应的拦截器。下面是对代码的详细解析:

  1. 引入 axios

import axios from "axios";

这一行从 axios 包中引入 axios 对象。axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js。

  1. 创建 axios 实例

const instance = axios.create();

使用 axios.create() 方法创建一个新的 axios 实例。这样做的好处是,你可以为这个特定的实例添加拦截器、配置默认值等,而不会影响到其他使用 axios 的地方。

  1. 请求拦截器

instance.interceptors.request.use( 
function (config) { 
// 在发送请求之前做些什么 
return config; 
}, 
function (error) { 
// 对请求错误做些什么 
return Promise.reject(error); 
} 
);

请求拦截器会在请求被发送之前执行。这里有两个回调函数:

  • 第一个回调函数:接收一个配置对象 config 作为参数。在这个函数里,你可以修改请求的配置(例如添加 headers、params 等),或者直接返回这个配置对象。
  • 第二个回调函数:用于处理请求错误。如果请求在发送之前发生错误(例如因为配置不正确),这个函数会被调用。这里,它只是简单地将错误包装成一个 Promise 并拒绝它。
  1. 响应拦截器

instance.interceptors.response.use( 
function (response) { 
// 对响应数据做点什么 
return response.data; 
}, 
function (error) { 
// 对响应错误做点什么 
return Promise.reject(error); 
} 
);

响应拦截器会在响应被处理之前执行。同样,这里也有两个回调函数:

  • 第一个回调函数:接收一个响应对象 response 作为参数。在这个函数里,你可以处理响应数据(例如提取数据、转换数据格式等),并返回处理后的结果。这里,它只是简单地返回响应体(response.data)。
  • 第二个回调函数:用于处理响应错误。如果请求成功发送但服务器返回了错误(例如 404、500 等状态码),这个函数会被调用。这里,它只是简单地将错误包装成一个 Promise 并拒绝它。
  1. 导出实例

export default instance;

最后,将创建的 axios 实例导出,以便在其他模块中使用。

总结:这段代码创建了一个自定义配置的 axios 实例,并为其添加了请求和响应的拦截器。这样做可以更方便地管理和处理 HTTP 请求和响应。

相关文章:

vue3中axios添加请求和响应的拦截器

本章主要是以记录为主。 在src创建一个utils文件夹,并在utils中创建一个request.js文件。 // 引入axios import axios from "axios"; // import qs from "qs"; // 创建axios实例 const instance axios.create(); // 请求拦截器 instance.int…...

<router-link>出现Error: No match for {“name“:“home“,“params“:{}}

在将<a></a>标签换到<router-link></router-link>的时候出现No match for {"name":"home","params":{}}这样的错误&#xff0c;其中格式并无错误&#xff0c; <router-link class"navbar-brand active" …...

prompt 工程整理(未完、持续更新)

工作期间会将阅读的论文、一些个人的理解整理到个人的文档中&#xff0c;久而久之就积累了不少“个人”能够看懂的脉络和提纲&#xff0c;于是近几日准备将这部分略显杂乱的内容重新进行梳理。论文部分以我个人的理解对其做了一些分类&#xff0c;并附上一些简短的理解&#xf…...

兼容性测试用例

备注:本文为博主原创文章,未经博主允许禁止转载。如有问题,欢迎指正。 个人笔记(整理不易,有帮助,收藏+点赞+评论,爱你们!!!你的支持是我写作的动力) 笔记目录:学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔:工作总结随笔_8、…...

阿里云4核8G云服务器价格多少钱?700元1年

阿里云4核8G云服务器价格多少钱&#xff1f;700元1年。阿里云4核8G服务器租用优惠价格700元1年&#xff0c;配置为ECS通用算力型u1实例&#xff08;ecs.u1-c1m2.xlarge&#xff09;4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选&#xff0c;CPU采用Intel(R) Xeon(R…...

ts 中的keyof 和typeof

作用&#xff1a; keyof&#xff1a;用于获取对象类型的所有键的联合类型。typeof&#xff1a;用于获取变量或表达式的类型。 返回类型&#xff1a; keyof&#xff1a;返回的是一个对象类型的所有键组成的联合类型。typeof&#xff1a;返回的是一个值的类型。 使用场景&#xf…...

每日一题:买卖股票的最佳时机II

给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格。 在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候 最多 只能持有 一股 股票。你也可以先购买&#xff0c;然后在 同一天 出售。 返回 你能获得的 最大 利润 。 示例 1&a…...

nginx安装在linux上

nginx主要用于反向代理和负载均衡&#xff0c;现在简单的说说如何在linux操作系统上安装nginx 第一步&#xff1a;安装依赖 yum install -y gcc-c pcre pcre-devel zlib zlib-devel openssl openssl-devel 第二步&#xff1a; 下载nginx&#xff0c;访问官网&#xff0c;ngin…...

ENSP-旁挂式AC

提醒&#xff1a;如果AC不能成功上线AP&#xff0c;一般问题不会出在AC上&#xff0c;优先关注AC-AP线路上的二层或三层组网的三层交换机 拓扑图 管理VLAN&#xff1a;99 | 业务VLAN&#xff1a;100 注意点&#xff1a; 1.连接AP的接口需要打上pvid为管理vlan的标签 2.AC和…...

如何获取手机root权限?

获取手机的 root 权限通常是指在 Android 设备上获取超级用户权限&#xff0c;这样用户就可以访问和修改系统文件、安装定制的 ROM、管理应用权限等。然而&#xff0c;需要注意的是&#xff0c;获取 root 权限可能会导致手机失去保修、安全性降低以及使系统变得不稳定。在获取 …...

2023年全国青少年信息素养大赛(Python)海南赛区复赛真题

2023年全国青少年信息素养大赛(Python)海南赛区复赛真题第1题,整数加8 题目描述: 输入一个整数,输出这个整数加8 的结果。 输入描述: 输入一行一个正整数。 输出描述: 输出求和的结果。 样例1: 输入: 5 输出: 13 x= int(input()) print(x+8) 第2题,哼哈二将 题目描…...

node.js服务器动态资源处理

一、node.js服务器动态资源处理与静态资源处理的区别&#xff1f; 静态与动态服务器主要区别于是否读取数据库&#xff0c;若然在数据库中的资料处理中将数据转换成可取用格式的结构&#xff0c;也就是说把对象转化为可传输的字节序列过程称为序列化&#xff0c;反之则为反序列…...

DNS是TCP还是UDP

既使用TCP也使用UDP 1. 域名解析时用UDP 在大多数情况下&#xff0c;DNS请求使用UDP协议&#xff0c;因为UDP协议可以提供较高的效率和安全性&#xff0c;尤其是在查询的响应大小较小&#xff08;通常不超过512字节&#xff09;时。非可靠连接&#xff0c;因为传输的数据量小…...

Redis魔法:解锁高性能缓存的神奇之门(二)

本系列文章简介&#xff1a; 在现代的软件开发中&#xff0c;高性能和高可用性是每个开发者都追求的目标。然而&#xff0c;随着数据量和访问频率的不断增长&#xff0c;传统的数据库存储方案往往难以应对这种挑战。这就引出了一个问题&#xff1a;如何在保证数据的高效访问和持…...

ROS2 仿真学习02 Gazebo导入官方示例模型

1.下载模型 git clone https://gitee.com/bingda-robot/gazebo_models.git将gazebo_models拖到到.gazebo当中&#xff08;如果没看到.gazebo文件请按住CTRLh&#xff09; 2.添加模型到gazebo的Insert 这就将官方示例的模型都导入到Gazebo 了 随便试试一个模型...

echarts图表按需导入

引入核心包引入图表类型引入使用组件引入渲染器注册所有引入 在项目中引入 Apache ECharts // 引入 echarts 核心模块&#xff0c;核心模块提供了 echarts 使用必须要的接口。 import * as echarts from echarts/core; // 引入柱状图图表&#xff0c;图表后缀都为 Chart impo…...

蓝桥杯(基础题)

试题 C: 好数 时间限制 : 1.0s 内存限制: 256.0MB 本题总分&#xff1a;10 分 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上 的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &…...

【R语言】概率密度图

概率密度图是用来表示连续型数据的分布情况的一种图形化方法。它通过在数据的取值范围内绘制一条曲线来描述数据的分布情况&#xff0c;曲线下的面积代表了在该范围内观察到某一数值的概率。具体来说&#xff0c;对于给定的连续型数据&#xff0c;概率密度图会使用核密度估计&a…...

【学习】软件测试需求分析要从哪些方面入手

软件测试需求分析是软件测试过程中非常重要的一个环节&#xff0c;它是为了明确软件测试的目标、范围、资源和时间等要素&#xff0c;以确保软件测试的有效性和全面性。本文将从以下几个方面对软件测试需求分析进行详细的阐述&#xff1a; 一、软件测试目标 软件测试目标是指…...

starrocks的fe节点启动不起来的解决办法

fe节点启动报错:Do not specify the helper node to FE itself. Please specify it to the existing running Leader or Follower FE at com.starrocks.StarRocksFE.main(StarRocksFE.java:68) [starrocks-fe.jar:?] Caused by: com.sleepycat.je.EnvironmentFailureExcepti…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...