当前位置: 首页 > 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…...

企业高效知识体系:8大核心特征+可落地搭建框架,告别知识散乱

对于企业而言&#xff0c;知识从来不是“文件堆”&#xff0c;而是能支撑业务、培养新人、规避风险的核心资产。很多企业陷入“文档满天飞、新人没人带、老员工离职带跑经验”的困境&#xff0c;本质是没有搭建起高效、完整的知识体系。今天就一次性讲透&#xff1a;一个能真正…...

如何安全提取Chrome浏览器密码:3种实用方法完全指南

如何安全提取Chrome浏览器密码&#xff1a;3种实用方法完全指南 【免费下载链接】chromepass Get all passwords stored by Chrome on WINDOWS. 项目地址: https://gitcode.com/gh_mirrors/chr/chromepass 在数字生活中&#xff0c;你是否遇到过忘记网站密码的困扰&…...

Ubuntu 24.04镜像源配置全攻略:从原理到实战(含常见报错解决)

Ubuntu 24.04镜像源深度解析与高效配置实战 最近在帮朋友配置新装的Ubuntu 24.04时&#xff0c;发现这个版本在软件源管理上做了重大调整——从传统的sources.list文件变成了结构化更强的sources.d目录配置方式。这个变化让不少习惯了旧版本的用户感到困惑&#xff0c;也让我意…...

基于ANPC型三电平逆变器的VSG并网及参数自适应控制

ANPC虚拟同步机&#xff08;VSG&#xff09;并网&#xff08;参数自适应控制&#xff09;&#xff0c;基于ANPC型三电平逆变器的参数自适应控制&#xff0c;采用电压电流双闭环控制&#xff0c;中点电位平衡控制&#xff0c;且实现VSG并网。 1.VSG参数自适应 2.VSG并网 3.提供相…...

Docker Compose 多服务编排实战:从零搭建微服务架构

Docker Compose 多服务编排实战&#xff1a;从零搭建微服务架构 目录 为什么需要 Docker Compose&#xff1f;实战项目架构环境准备核心服务搭建高级特性&#xff1a;负载均衡与服务发现日志集中管理&#xff08;EFK 栈&#xff09;生产环境最佳实践常见问题排查 为什么需要 …...

3步解锁数据自由:WeChatMsg让聊天记录成为数字资产

3步解锁数据自由&#xff1a;WeChatMsg让聊天记录成为数字资产 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMs…...

OpenClaw资源监控方案:Qwen3-32B镜像驱动服务器健康巡检

OpenClaw资源监控方案&#xff1a;Qwen3-32B镜像驱动服务器健康巡检 1. 为什么需要AI驱动的资源监控&#xff1f; 去年我的个人开发服务器连续宕机三次&#xff0c;每次都是因为磁盘写满导致服务崩溃。传统监控工具虽然能发出警报&#xff0c;但往往在问题发生后才会触发&…...

告别序列‘拉直’的暴力美学:手把手复现MaIR,体验保持图像局部与连续性的Mamba新玩法

告别序列“拉直”的暴力美学&#xff1a;手把手复现MaIR&#xff0c;体验保持图像局部与连续性的Mamba新玩法 在计算机视觉领域&#xff0c;图像修复任务&#xff08;如去噪、超分、去模糊&#xff09;一直是研究热点。传统方法往往将2D图像“拉直”为1D序列进行处理&#xff0…...

S7-200 PLC与组态王称重配料生产线自动控制系统:后继产品包含梯形图、接线图、原理图及I...

S7-200 PLC和组态王称重配料生产线自动控制系统配料 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面上周刚结了个小单子&#xff0c;给本地一家饲料厂改了套半自动的称重配料线&#xff0c;用的就是S7-200 PLC加…...

从555到正弦波:手把手教你用立创EDA仿真+打样一个2KHz波形发生器(附完整工程)

从555到正弦波&#xff1a;立创EDA全流程打造2KHz波形发生器实战指南 在电子设计领域&#xff0c;波形发生器是最基础却又最考验设计功底的经典项目之一。想象一下&#xff0c;当你亲手设计的电路板输出完美的正弦波时&#xff0c;那种成就感绝非购买现成模块可比。本文将带你用…...