【Axios】如何在Vue中使用Axios请求拦截器
✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，Golang开发，云原生开发，前后端框架，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S集群搭建与管理，linux，shell脚本等实操经验，网站搭建，数据库等分享。所属的专栏：前端零基础，实战进阶教学
景天的主页：景天科技苑
Vue中Axios拦截器
在Vue项目中，Axios是一个非常流行的HTTP客户端，用于发送请求和接收响应。Axios拦截器是Axios的一个强大功能，它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截。通过拦截器，你可以添加请求头、处理请求参数、处理错误等。本文将结合实际案例，详细介绍如何在Vue中使用Axios拦截器。
一、安装Axios
首先，你需要在Vue3项目中安装Axios。你可以使用npm或yarn等包管理工具进行安装。
npm install axios
或者
yarn add axios
二、创建Axios实例
在Vue3项目中，通常会在项目的某个地方创建一个Axios实例，并对其进行配置。你可以将Axios实例放在一个单独的文件中，例如src/axios.js。
// src/axios.js
import axios from 'axios';// 创建Axios实例
const axiosInstance = axios.create({baseURL: '// 你的基础URL', // 设置请求的baseURLtimeout: 5000, // 设置请求超时时间
});// 导出Axios实例
export default axiosInstance;
在上面的代码中，我们使用axios.create方法创建了一个Axios实例，并传递了一些配置选项，例如baseURL和timeout。
三、设置请求拦截器
请求拦截器允许你在请求发送之前对请求进行处理。你可以在Axios实例中使用interceptors.request.use方法来添加请求拦截器。
// src/axios.js
import axios from 'axios';// 创建Axios实例
const axiosInstance = axios.create({baseURL: '// 你的基础URL',timeout: 5000,
});// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {// 在发送请求之前做些什么// 例如，添加请求头const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}// 处理请求参数// config.params = {// ...config.params,// key: 'value',// };return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 导出Axios实例
export default axiosInstance;
在上面的代码中，我们添加了一个请求拦截器。在拦截器中，我们检查本地存储中是否存在token，如果存在，则将其添加到请求头中。你还可以对请求参数进行处理，例如添加或修改参数。
四、设置响应拦截器
响应拦截器允许你在响应返回之后对响应进行处理。你可以在Axios实例中使用interceptors.response.use方法来添加响应拦截器。
// src/axios.js
import axios from 'axios';// 创建Axios实例
const axiosInstance = axios.create({baseURL: '// 你的基础URL',timeout: 5000,
});// 添加请求拦截器（同上）// 添加响应拦截器
axiosInstance.interceptors.response.use((response) => {// 对响应数据做些什么// 例如，处理响应数据格式// response.data = {// ...response.data,// key: 'value',// };return response;},(error) => {// 对响应错误做些什么const { response } = error;if (response) {// 判断错误状态码if (response.status === 400) {// 请求错误} else if (response.status === 401) {// 未授权，请重新登录} else if (response.status === 403) {// 拒绝访问（403）}return Promise.reject(response.data);} else {console.error('网络连接异常，请稍后再试！');}}
);// 导出Axios实例
export default axiosInstance;
在上面的代码中，我们添加了一个响应拦截器。在拦截器中，我们可以对响应数据进行处理，例如修改数据格式。我们还可以根据响应的状态码来处理不同的错误情况。
五、在Vue组件中使用Axios实例
现在，我们已经在项目中创建了Axios实例，并添加了请求和响应拦截器。接下来，我们可以在Vue组件中使用这个Axios实例来发送请求。
<!-- src/components/YourComponent.vue -->
<template><div>数据展示</div>
</template><script>
import axiosInstance from '../axios';export default {name: 'YourComponent',mounted() {axiosInstance.get('/your-endpoint').then(data => {console.log(data);}).catch(error => {console.error('错误:', error);});},
};
</script>
在上面的代码中，我们在Vue组件的mounted生命周期钩子中使用了Axios实例来发送一个GET请求。请求成功后，我们将响应数据打印到控制台。如果请求失败，我们将错误信息打印到控制台。
六、封装请求方法
为了更方便地在项目中发送请求，我们可以将常用的请求方法封装起来。例如，我们可以封装GET和POST请求方法。
// src/api/axios.js
import axios from 'axios';// 创建Axios实例（同上）// 封装GET请求方法
export function getRequest(url, params = {}) {return axiosInstance.get(url, { params });
}// 封装POST请求方法
export function postRequest(url, data = {}) {return axiosInstance.post(url, data);
}
现在，我们可以在Vue组件中使用封装好的请求方法来发送请求。
<!-- src/components/YourComponent.vue -->
<template><div>数据展示</div>
</template><script>
import { getRequest, postRequest } from '../api/axios';export default {name: 'YourComponent',mounted() {// 使用GET请求方法getRequest('/your-get-endpoint', { param1: 'value1' }).then(data => {console.log('GET请求响应:', data);}).catch(error => {console.error('GET请求错误:', error);});// 使用POST请求方法postRequest('/your-post-endpoint', { key: 'value' }).then(data => {console.log('POST请求响应:', data);}).catch(error => {console.error('POST请求错误:', error);});},
};
</script>
七、统一管理API接口
在项目中，我们可能会有很多API接口。为了方便管理和维护，我们可以将这些接口统一管理起来。例如，我们可以在src/api目录下创建一个api.js文件，并在其中定义所有的API接口。
// src/api/api.js
import { getRequest, postRequest } from './axios';// 定义用户相关API接口
export class UserApi {static async login(params) {return postRequest('/login', params);}static async register(params) {return postRequest('/register', params);}static async getUserInfo(params) {return getRequest('/userInfo', params);}
}// 定义书籍相关API接口
export class BookApi {static async getBookList(params) {return getRequest('/bookList', params);}
}
现在，我们可以在Vue组件中使用统一管理好的API接口来发送请求。
<!-- src/components/YourComponent.vue -->
<template><div><button @click="handleLogin">登录</button></div>
</template><script>
import { UserApi } from '../api/api';export default {name: 'YourComponent',methods: {async handleLogin() {const params = {username: 'admin',password: '123456',};try {const response = await UserApi.login(params);console.log('登录成功:', response);} catch (error) {console.error('登录失败:', error);}},},
};
</script>
相关文章：
【Axios】如何在Vue中使用Axios请求拦截器
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...
query did not return a unique result: 2；
文章目录 错误原因分析关键位置可能原因解决方法1. 检查数据库数据2. 修改查询方法3. 限定查询返回唯一结果4. 检查业务逻辑 总结 1、LoginLogRepository2、LoginLogService3、LoginLogApiService4、MyAuthenticationSuccessHandler 微信小程序开发者工具控制台报错 {"tim…...
PHP升级
PHP升级CentOs8 wget http://rpms.famillecollet.com/enterprise/remi-release-8.rpm rpm -ivh remi-release-8.rpm --nodeps --force rpm -qa | grep remi dnf module list php dnf module enable php:remi-7.4首先，重置当前的 PHP 模块，以便清理所有已…...
C++设计模式（原型、代理、适配器、组合）
一、原型模式 1.定义 用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 原型模式允许通过复制现有的对象来创建新对象，而不是通过实例化类来创建。这种方式可以避免创建重复的对象，从而提高性能和降低内存消耗。 2.组成 …...
超详细搭建PhpStorm+PhpStudy开发环境
刚开始接触PHP开发，搭建开发环境是第一步，网上下载PhpStorm和PhpStudy软件，怎样安装和激活就不详细说了，我们重点来看一看怎样搭配这两个开发环境。 前提：现在假设你已经安装完PhpStorm和PhpStudy软件。 我的PhpStor…...
Axure RP在智慧农场可视化大屏系统设计中的应用
随着科技的飞速发展，智慧农业已成为现代农业的重要发展方向。智慧农场可视化大屏系统作为智慧农业的重要组成部分，正逐步成为农场管理、决策和展示的核心工具。Axure RP，作为一款强大的原型设计工具，其在智慧农场可视化大屏系统的…...
《嵌入式硬件设计》
一、引言 嵌入式系统在现代科技中占据着至关重要的地位，广泛应用于消费电子、工业控制、汽车电子、医疗设备等众多领域。嵌入式硬件设计作为嵌入式系统开发的基础，直接决定了系统的性能、可靠性和成本。本文将深入探讨嵌入式硬件设计的各个方面ÿ…...
【C语言篇】C 语言总复习（上）：点亮编程思维，穿越代码的浩瀚星河
我的个人主页 我的专栏：C语言，希望能帮助到大家！！！点赞❤ 收藏❤ 在计算机科学的广袤宇宙中，C语言犹如一颗璀璨的恒星，散发着持久而耀眼的光芒。它作为一种基础且强大的编程语言，承载…...
多线程——04
本节目标 1. wait 和 notify 方法 2. 代码案例 1. wait 和 notify 方法 1. 方法使用 多个线程的执行顺序本身是随机的（抢占式执行） wait —— 让指定线程进入阻塞状态 notify —— 唤醒对应的阻塞状态的线程 注意： wait, notify, notifyAl…...
使用ECS和OSS搭建个人网盘
在linux服务器 一、下载cloudreve安装包。 执行如下命令，下载cloudreve安装包。 wget https://labfileapp.oss-cn-hangzhou.aliyuncs.com/cloudreve_3.3.1_linux_amd64.tar.gz 下载完毕后，执行如下命令，解压cloudreve安装包。 tar -zxvf c…...
Android 单元测试断言校验方法 org.junit.Assert
判断布尔值 assertTrue assertFalse 判断对象非空 assertNull(object); 案例： PersistableBundle result Util.getCarrierConfig(mockContext, subId);assertNull(result); 判断是否相等 assertEquals("mocked_string", result.toString()); package or…...
SpringSecurity学习
介绍 SpringSecurity是一个作用于身份认证和权限控制的框架，其针对的主要就是网站的安全问题 页面代码 要使用SpringSecurity的前提是有一个可以正常访问业务逻辑的代码，再使用SpringSecurity实现权限控制和身份验证。 后端代码 package com.learn.…...
Eureka和Zookeeper、Nacos的区别
目录 一、Eureka与Zookeeper的区别 适用场景： 架构设计： 功能特性： 社区生态： 二、Eureka与Nacos的区别 接口方式： 实例类型： 健康检测： 服务发现： 一致性与可用性&#…...
基于gitlab API刷新MR的commit的指定status
场景介绍 自己部署的gitlab Jenkins,并已经设置好联动(如何设置可以在网上很容易搜到)每个MergeRequest都可以触发多个Jenkins pipeline，pipeline结束后会将状态更新到gitlab这个MR上希望可以跳过pipeline运行，直接将指定的MR的指定pipeline状态刷新为…...
SpringBoot | 拦截器 | 统一数据返回格式 | 统一异常处理 | 适配器模式
拦截器 拦截器是Spring框架提供的核心功能之一, 主要用来拦截用户的请求, 在指定方法前后, 根据业务需要执行预先设定的代码. 也就是说, 允许开发人员提前预定义一些逻辑, 在用户的请求响应前后执行. 也可以在用户请求前阻止其执行. 在拦截器当中，开发人员可以在…...
Oracle清除水位
– 清除水位 ALTER TABLE 数据库名.表名 ENABLE ROW MOVEMENT; ALTER TABLE 数据库名.表名 SHRINK SPACE CASCADE; ALTER TABLE 数据库名.表名 DISABLE ROW MOVEMENT; – 回收统计信息 BEGIN DBMS_STATS.GATHER_TABLE_STATS(OWNNAME > ‘数据库名’, TABNAME > ‘表名’…...
软件工程——期末复习（2）
Part1：软件工程基本概念 软件程序文档数据 在软件工程中，软件通常被定为程序、文档和数据的集合。程序是按事先设计的功能和性能要求编写的指令序列；程序是完成指定功能的一段特定语言代码。文档是描述程序操作和使用的文档，是与…...
RAID1技术是什么？它的发展和工作原理如何？
RIAD1是一种先进的数据存储与冗余技术，设计用于解决现代分布式系统中常见的数据安全、数据一致性和高可用性等问题。随着云计算和大规模分布式存储系统的兴起，如何保障数据在高效传输与存储过程中仍然能具备足够的安全性和可靠性，成为了各大企…...
【Apache Paimon】-- 8 -- flink 创建 paimon connecor 的两种方式
目录 1、使用 catalog 创建非临时表 2、使用 with 创建 temporary 表 3、对比 4、参考 1、使用 catalog 创建非临时表 CREATE CATALOG my_catalog WITH (type = paimon,warehouse = hdfs:///path/to/warehouse );USE CATALOG my_catalog; CREATE TABLE `<your-paimon-…...
js进阶-关于运算符++
一、运算符与表达式 运算符按参与的运算单元数量分为：一元运算符、二元运算符和三元运算符；表达式是运算单元和运算符一起构成的；每个表达式都有一个运算后的返回值。 二、关于运算符 1.概述 运算符分为两部分，第一部分是返回运…...
三维地图，智慧城市，商业智能BI，数据可视化大屏（Cesiumjs/UE）
绘图工具 三维地图：Cesiumjs 建模方式：激光点云建模、航拍倾斜摄影建模、GIS建模、BIM建模、手工建模 建模工具：C4D Blender GeoBuilding ArcGIS Cesiumjs <!DOCTYPE html> <html lang"en"> <head><meta …...
通过EPEL 仓库，在 CentOS 7 上安装 OpenResty
通过EPEL 仓库，在 CentOS 7 上安装 OpenResty 通过EPEL 仓库，在 CentOS 7 上安装 OpenResty步骤 1: 安装 EPEL 仓库步骤 2: 安装 OpenResty步骤 3: 启动 OpenResty步骤 4: 设置开机自启步骤 5: 验证安装说明 通过EPEL 仓库，在 CentOS 7 上安装…...
每日一题 LCR 054. 把二叉搜索树转换为累加树
LCR 054. 把二叉搜索树转换为累加树 使用后序遍历即可 class Solution { public:TreeNode* convertBST(TreeNode* root) {int temp 0;dfs(root,temp);return root;}void dfs(TreeNode* root,int &temp){if(!root){return ;}dfs(root->right,temp);temp root->val;…...
【贪心算法】贪心算法五
贪心算法五 1.跳跃游戏 II2.跳跃游戏3.加油站3.单调递增的数字 点赞👍👍收藏🌟🌟关注💖💖 你的支持是对我最大的鼓励，我们一起努力吧!😃😃 1.跳跃游戏 II 题目链接&…...
vue2播放视频和预览文件的组件以及使用方法
##文件预览组件 按照组件 解决展示pdf的问题 npm install pdfh5 npm install canvas2.8.0 --ignore-scripts npm install --save dommatrix npm install --save web-streams-polyfill解决excel和docx预览的问题 npm install vue-office/docx vue-demi0.14.6 npm inst…...
记录一下，解决js内存溢出npm ERR! code ELIFECYCLEnpm ERR! errno 134 以及 errno 9009
项目是个老项目，依赖包也比较大，咱就按正常流程走一遍来详细解决这个问题，先看一下node版本，我用的是nvm管理的，详细可以看我的其他文章 友情提醒：如果项目比较老，包又大，又有一些需…...
【批处理脚本】更改Windows系统中的 hosts 解析文件
概述 作用 修改 Windows 系统中的 hosts 文件，可以实现 插入 或 删除 条目。该脚本允许用户以管理员权限执行，将特定的域名解析到指定的 IP 地址 应用场景 非常适用于需要频繁或批量修改 hosts 文件的场景： 屏蔽网站、域名重定向、DNS 污染防…...
AIGC 与艺术创作：变革与机遇
在当今数字化时代，人工智能生成内容（AIGC）正以惊人的速度重塑着艺术创作的格局，为艺术家们带来了令人振奋的新机遇。 一.AIGC 的崛起与艺术领域的变革 随着人工智能技术的不断进步，AIGC 逐渐在艺术领域崭露头角。它依…...
String IP和Int IP的互相转换
android中，wifiManager.connectionInfo.ipAddress 可以获取到wifi的ip地址，但这是一个int值，如何转换为常见的如192.168.1.129这种形式，以及这种形式如何转换回int值的形式。 这里ip分为4段，每一段的值都是0 ~ 255&am…...
【大数据学习 | 面经】yarn的资源申请和分配的单位-Container
在yarn中，资源的申请和分配是以container为单位进行的，而不是直接以application和task为单位。 每个提交到yarn上的应用程序（application）都有一个对应的ApplicationMaster（AM）。这个AM负责与ResourceMana…...
php基础：文件处理2
1.文件属性 当我们在程序中操作文件时，可能会使用到文件的一些常见属性，比如文件的大小、类型、修改时间、访问时间以及权限等等。PHP 中提供了非常全面的用来获取这些属性的内置函数，如下表所示。 2.目录操作 新建目录：mkdir(路…...
)
gradle下载慢解决方案2024 /12 /1android studio (Windows环境)
gradle下载慢解决方案2024 /12 /1 默认环境配置好了,环境配置和程序安装请出门右转 打开软件,点击右上角设置,找到如下设置页 选择本地安装并制定好你已经安装好的 gradle 应用保存即可 全局插件环境配置(新版本可以直接在设置中添加了) 找对应位置添加国内源并把前面的内置源…...
使用Java将PDF文件解析成Excel文件
安装pom依赖 <!-- 解析pdf--><dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.27</version> <!-- 请检查并使用最新版本 --></dependency>测试读取pdf文件…...
怎么区分直线模组中的导程和行程？
直线模组是一种直线传动装置，安装方便，精度高，其使用范围广。直线模组中的导程和行程是两个不同的概念，它们分别描述了直线模组的不同性能参数。 直线模组的行程指的是模组能够正常移动的最大距离，即滑块预期移动的有效…...
算法日记 42 day 图论
今天来看看广度优先搜索，并且写几个题。刷到这里我才想起来，当时第一次面试的时候问的就是这个题，当时大概知道一点思路，但不清楚是图论方面的，更别说写出来了。 广度优先搜索（BFS） 不同于深度…...
STM32 GPIO 8种工作模式的应用场景
目录 一、四种输入模式1、模拟输入：2、浮空输入：3、上拉输入：4、下拉输入： 二、四种输出模式1、推挽输出：2、开漏输出：3、复用推挽输出：4、复用开漏输出： 一、四种输入模式 1、模拟…...
JVM 类加载器有哪些？双亲委派机制的作用是什么？如何自定义类加载器？
类加载器分类 大家好，我是码哥，可以叫我靓仔，《Redis 高手心法》畅销书作者。 先回顾下，在 Java 中，类的初始化分为几个阶段: 加载、链接（包括验证、准备和解析）和 初始化。 而 类加载器&#x…...
揭秘：短视频矩阵源码功能开发分析！！！
一、短视频矩阵系统源码概述 短视频矩阵系统源码旨在为内容创作者及企业提供一种高效的工具，以实现对多个短视频账户的一站式管理。该系统支持同时管理、发布、监控和优化多达1000个短视频账户，显著提升了操作效率。 二、主要功能 1. 多账号管理 该系…...
leetcode - 2337. Move Pieces to Obtain a String
Description You are given two strings start and target, both of length n. Each string consists only of the characters ‘L’, ‘R’, and ‘_’ where: The characters ‘L’ and ‘R’ represent pieces, where a piece ‘L’ can move to the left only if there i…...
第九篇：k8s 通过helm发布应用
什么是helm？ Helm 是 Kubernetes 的包管理器。Helm 是查找、分享和使用软件构建 Kubernetes 的最优方式。 在红帽系的Linux中我们使用yum来管理RPM包，类似的，在K8s中我们可以使用helm来管理资源对象（Deployment、Service、Ingress…...
MySQL：锁机制
锁是计算机协调多个进程或线程并发访问某一资源的机制（避免争抢）。 在数据库中，除传统的计算资源（如 CPU、RAM、I/O 等）的争用以外，数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效…...
在lio_sam中融入GPS
文章目录 概要GPS里程计GPS因子反算后的GPS里程计概要 在LIO（激光惯性里程计）系统中，将GPS信息融合到里程计中，借助GTSAM（Georgia Tech Smoothing and Mapping）库进行因子图优化，可以有效提升全局定位精度。 GPS里程计 利用GeographicLib第三方库将经纬度投影到局部笛…...
快速构建NLP理论知识体系
NLP理论知识体系 一句话解释NLPNLP模型及原理简述1、Rag 一句话解释NLP 如果我们要实现机器翻译、情感分析、问答系统、文本摘要、聊天机器人、构造智能化的辅助文件填写模板，NLP可以通过现成的模型对输入的语音、文字、图片进行处理（分词、标词性、去停…...
长期稳定境外号码解决方案：内地用户如何打电话、接收短信和验证码
文章目录 📖 介绍 📖🏡 演示环境 🏡📒 三大方案对比 📒📝 免费且稳定的境外号码📝 长期稳定且符合本地政策📝 适合低频使用者⚓️ 相关链接 ⚓️📖 介绍 📖 许多用户在日常生活中需要拨打境外电话、接收短信或验证码，尤其是跨境电商从业者，更是对境外号…...
SpringCloud 与 SpringBoot版本对应关系，以及maven,jdk
目录 SpringCloud 与 SpringBoot各版本的对应关系 方式一 Learn 方式二 OverView SpringBoot与JDK、maven 容器等对应关系 SpringCloud 与 SpringBoot各版本的对应关系 SpringCloudSpringBootFinchley2.0.xFinchley.SR1Spring Boot >=2.0.3.RELEASE and <=2.0.9RELEAS…...
FSMC实验
FSMC ，即灵活的静态存储控制器，能够与同步或异步存储器和 16 位 PC 存储器卡连接， STM32 的 FSMC 接口支持包括 SRAM 、 NAND FLASH 、 NOR FLASH 和 PSRAM 等存储器。 从上图我们可以看出， STM32 的 FSMC 将外部设…...
K8s命令大全（Complete List of K8s Commands）
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…...
C++学习笔记
小甲鱼学习课程 02 #include <iostream> 头文件 iostream iostream 翻译为IO流 输入输出流 using namespace std; 引入命名空间 c标准库所使用的所有标识符都是在同一个特殊的名字空间std中来定义的； 偷懒使用这句话； std::cout <…...
伺服控制电机多大功率合适？
随着现代工业自动化的发展，伺服控制电机在各个行业的应用愈加广泛。伺服电机以其精确的控制、高效的运行和高响应速度，成为许多机械设备中不可或缺的组成部分。然而，在选择伺服电机时，确定其功率大小是一个关键环节。那么…...
《OpenCV 基础全攻略：从入门到精通》
《OpenCV 基础全攻略：从入门到精通》 一、OpenCV 简介（一）特点（二）优势（三）应用场景 二、安装与配置三、OpenCV 函数详解1. 图像读取函数 cv2.imread ()2. 图像显示函数 cv2.imshow ()3. 图像保…...