vue3 全局配置Axios实例
目录
前言
配置Axios实例
页面使用
总结
前言
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求,支持请求和响应的拦截、转换、取消请求等功能。关于它的作用:
发起 HTTP 请求: Axios 提供了丰富的 API,使得在浏览器和 Node.js 中发起 HTTP 请求变得非常容易。可以发送 GET、POST、PUT、DELETE 等不同类型的请求。
Promise 风格: Axios 使用 Promise 风格的 API,使得在异步请求中更容易处理数据和错误。可以使用
.then()
处理成功的响应,使用.catch()
处理错误。拦截请求和响应: 可以在请求和响应被发送或接收之前进行拦截处理。这使得在请求发送前或响应返回后可以进行一些全局的处理,比如添加请求头、处理错误等。
自动转换 JSON 数据: Axios 在接收到响应数据时,会自动将 JSON 字符串转换为 JavaScript 对象。这样可以方便地处理和操作服务器返回的 JSON 数据。
取消请求: Axios 允许你创建一个取消请求的令牌,以便在需要时取消尚未完成的请求。这在处理组件销毁或用户导航时非常有用,可以避免不必要的请求。
全局配置: 可以配置全局的默认值,例如基础URL、超时时间等,以便在整个应用程序中使用相同的设置。
处理请求和响应数据: 可以在请求和响应时对数据进行转换和处理。这包括序列化请求数据、解析响应数据等。
上传和下载进度: Axios 提供了上传和下载进度的事件,可以监视请求和响应的进度。这对于实时显示进度条等功能非常有用。
总体而言,Axios是一个强大而灵活的工具,可以简化和优化HTTP请求的处理,是前端开发中常用的网络请求库之一,并且当在Vue.js 3项目中使用Axios时,可以通过全局设置来配置Axios实例,以便在整个应用程序中共享相同的请求和响应逻辑,比如500或者401时,系统的一些操作。
配置Axios实例
前提,需要先安装axios:
npm install axios
如下:
开始配置,先在项目的一个文件夹下某创建一个文件,里面进行Axios 实例配置,通常在src/utils下,一般内容有:
import axios from 'axios';// 创建 Axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_URL, // 使用环境变量配置 baseURLtimeout: 5000, // 设置请求超时时间
});// 请求拦截器
service.interceptors.request.use((config) => {// 在请求发送前可以进行一些配置,例如添加认证信息等config.headers['X-Auth-Token'] = 'your_token'; // 示例:添加认证信息return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response) => {// 在响应返回后,可以进行一些处理,例如判断是否需要更新令牌等// ...return response;},(error) => {// 处理响应错误// ...return Promise.reject(error);}
);export default service;
上面是比较基础的,可以在此基础上进行自定义的操作,比如我下面这种:
axios-req.ts
import axios from 'axios'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { useBasicStore } from '@/store/basic'//使用axios.create()创建一个axios请求实例
const service = axios.create()
let loadingInstance: any = null //loading实例
let tempReqUrlSave = ''
let authorTipDoor = trueconst noAuthDill = () => {authorTipDoor = falseElMessageBox.confirm('请重新登录', {confirmButtonText: '重新登录',closeOnClickModal: false,showCancelButton: false,showClose: false,type: 'warning'}).then(() => {useBasicStore().resetStateAndToLogin()authorTipDoor = true})
}//请求前拦截
service.interceptors.request.use((req: any) => {const { token, axiosPromiseArr }: any = useBasicStore()//axiosPromiseArr收集请求地址,用于取消请求req.cancelToken = new axios.CancelToken((cancel) => {tempReqUrlSave = req.urlaxiosPromiseArr.push({url: req.url,cancel})})//设置token到headerif (token) req.headers['X-Auth-Token'] = token//如果req.method给get 请求参数设置为 ?name=xxxif ('get'.includes(req.method?.toLowerCase()) && !req.params) req.params = req.data//req loading// @ts-ignoreif (req.reqLoading ?? true) {loadingInstance = ElLoading.service({lock: true,fullscreen: true,// spinner: 'CircleCheck',text: '数据载入中...',background: 'rgba(0, 0, 0, 0.1)'})}return req},(err) => {//发送请求失败Promise.reject(err)}
)
//请求后拦截
service.interceptors.response.use((res: any) => {//取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)if (loadingInstance) {loadingInstance && loadingInstance.close()}//download fileif (res.data?.type?.includes("sheet")) {return res}const { code, msg } = res.dataconst successCode = [0,200,20000]const noAuthCode = [401,403]if (successCode.includes(code)) {return res.data} else {//authorTipDoor 防止多个请求 多次alterif (authorTipDoor) {if (noAuthCode.includes(code)) {noAuthDill()} else {// @ts-ignoreif (!res.config?.isNotTipErrorMsg) {ElMessage.error({message: msg,duration: 2 * 1000})} else {return res}return Promise.reject(msg)}}}},//响应报错(err) => {//取消请求useBasicStore().remotePromiseArrByReqUrl(tempReqUrlSave)if (loadingInstance) {loadingInstance && loadingInstance.close()}ElMessage.error({message: err,duration: 2 * 1000})return Promise.reject(err)}
)
//导出service实例给页面调用 , config->页面的配置
export default function axiosReq(config) {return service({baseURL: import.meta.env.VITE_APP_BASE_URL,timeout: 8000,...config})
}
之后我们可以在api文件夹下新建一个user.ts,放一些API。就像这样:
import axiosReq from '@/utils/axios-req'//登录
export const loginReq = (subForm) => {return axiosReq({url: '/login',method: 'post',data: subForm})
}//退出登录
export const loginOutReq = () => {return axiosReq({url: '/loginOut',method: 'post'})
}
页面使用
这里以登录页为例
登录页面发送请求,一般会发送用户账号密码,然后获取到一个token,所以我一般这样用:
import { loginReq } from '@/api/user'const loginFunc = () => {loginReq({username: subForm.keyword,password: subForm.password}).then(({ data }) => {elMessage('登录成功')basicStore.setToken(data?.token)router.push('/')}).catch((err) => {tipMessage.value = err?.msg}).finally(() => {subLoading.value = false})
}
总结
如果想在Vue全局使用的话,可以用provide
和inject
来在整个应用程序中提供和注入Axios实例。
import { createApp } from 'vue'; import App from './App.vue'; import request from '@/utils/request';const app = createApp(App);// 提供Axios实例 app.provide('request', request);app.mount('#app');
页面使用:
export default {inject: ['request'],methods: {fetchData() {this.request.get('/api/data').then(response => {// 处理响应数据}).catch(error => {// 处理请求错误});},}, };
但是还是建议每个页面需要哪些API就引入哪些吧。
总结,aixos的全局配置会方便API管理,并且对于一些关于 token 处理和错误处理的逻辑,以及状态码的反馈都是比较方便的,根据项目需求来实现。
相关文章:

vue3 全局配置Axios实例
目录 前言 配置Axios实例 页面使用 总结 前言 Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它提供了一种简单、一致的 API 来处理HTTP请求,支持请求和响应的拦截、转换、取消请求等功能。关于它的作用: 发起 HTTP …...

EI级 | Matlab实现TCN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测
EI级 | Matlab实现TCN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 EI级 | Matlab实现TCN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.【EI级】 Matlab实现TCN-BiGRU-Mult…...

WeNet语音识别分词制作词云图
在线体验 ,点击识别语音需要等待一会,文件太大缓存会报错 介绍 本篇博客将介绍如何使用 Streamlit、jieba、wenet 和其他 Python 库,结合语音识别(WeNet)和词云生成,构建一个功能丰富的应用程序。我们将深入了解代码…...

Proxyman:现代本地Web调试代理工具
1. 简介 1.1 什么是Proxyman? Proxyman是一款专为macOS设计的现代本地Web调试代理工具,它不仅支持macOS平台,还能无缝地与iOS和Android设备进行集成。作为一个网络调试工具,Proxyman的设计旨在提供高性能、直观且功能丰富的解决…...

k8s中DaemonSet实战详解
一、DaemonSet介绍 DaemonSet 的主要作用,是在 Kubernetes 集群里,运行一个 Daemon Pod。DaemonSet 只管理 Pod 对象,然后通过 nodeAffinity 和 Toleration 这两个调度器参数的功能,保证了每个节点上有且只有一个 Pod。 二、Daem…...

信号处理设计模式
问题 如何编写信号安全的应用程序? Linux 应用程序安全性讨论 场景一:不需要处理信号 应用程序实现单一功能,不需要关注信号 如:数据处理程序,文件加密程序,科学计算程序 场景二:需要处理信…...

Linux权限的基本理解
一:🚩Linux中的用户 1.1🥦用户的分类 🌟在Linux中用户可以被分为两种用户: 超级用户(root):可以在Linux系统中做各种事情而不被约束普通用户:只能做有限的事情被权限约束 在实际操作时超级用户的命令提示符为#,普通用户的命令提示符为$,可…...

AI人工智能大模型讲师叶梓《基于人工智能的内容生成(AIGC)理论与实践》培训提纲
【课程简介】 本课程介绍了chatGPT相关模型的具体案例实践,通过实操更好的掌握chatGPT的概念与应用场景,可以作为chatGPT领域学习者的入门到进阶级课程。 【课程时长】 1天(6小时/天) 【课程对象】 理工科本科及以上࿰…...

nat地址转换
原理 将内网地址转换成外网地址 方式 掌握动态NAT的配置方法 掌握Easy IP的配置方法 掌握NAT Server的配置方法 实验 r1 r2 是内网 ar1 ip地址 ip add ip地址 掩码 ip route-static 0.0.0.0 0 192.168.1.254 默认网关 吓一跳网关 相等于设置了网关 ar2 …...

第12课 循环综合举例
文章目录 前言一、循环综合举例1. 质数判断问题2. 百人百砖问题3. 猴子吃桃问题4. 质因数分解问题5. 数字统计问题。 二、课后练习2. 末尾3位数问题3. 求自然常数e4. 数据统计问题5. 买苹果问题。6. 找5的倍数问题。 总结 前言 本课使用循环结构,介绍了以下问题的解…...

Tuxera NTFS for Mac2024免费Mac读写软件下载教程
在日常生活中,我们使用Mac时经常会遇到外部设备不能正常使用的情况,如:U盘、硬盘、软盘等等一系列存储设备,而这些设备的格式大多为NTFS,Mac系统对NTFS格式分区存在一定的兼容性问题,不能正常读写。 那么什…...

C++ 具名要求
此页面中列出的具名要求,是 C 标准的规范性文本中使用的具名要求,用于定义标准库的期待。 某些具名要求在 C20 中正在以概念语言特性进行形式化。在那之前,确保以满足这些要求的模板实参实例化标准库模板是程序员的重担。若不这么做…...

大创项目推荐 深度学习二维码识别
文章目录 0 前言2 二维码基础概念2.1 二维码介绍2.2 QRCode2.3 QRCode 特点 3 机器视觉二维码识别技术3.1 二维码的识别流程3.2 二维码定位3.3 常用的扫描方法 4 深度学习二维码识别4.1 部分关键代码 5 测试结果6 最后 0 前言 🔥 优质竞赛项目系列,今天…...

C++初阶——基础知识(函数重载与引用)
目录 1.命名冲突 2.命名空间 3.缺省参数 4.函数重载 1.函数重载的特点包括: 2.函数重载的好处包括: 3.引用 引用的特点包括 引用的主要用途包括 引用和指针 引用 指针 类域 命名空间域 局部域 全局域 第一个关键字 命名冲突 同一个项目之间冲…...

车载电子电器架构 —— 电子电气系统开发角色定义
车载电子电器架构 —— 电子电气系统开发角色定义 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 注:本文12000字,深度思考者进!!! 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的…...

最新Redis7哨兵模式(保姆级教学)
一定一定要把云服务器的防火墙打开一定要!!!!!!!!!否则不成功!!!!!!!!&…...

Redis原理及常见问题
高性能之道 单线程模型基于内存操作epoll多路复用模型高效的数据存储结构redis的单线程指的是数据处理使用的单线程,实际上它主要包含 IO线程:处理网络消息收发主线程:处理数据读写操作,包括事务、Lua脚本等持久化线程:执行RDB或AOF时,使用持久化线程处理,避免主线程的阻…...

nvm 的安装及使用 (Node版本管理器)
目录 1、nvm 介绍 2、nvm安装 3、nvm 使用 4、node官网可以查看node和npm对应版本 5、nvm安装指定版本node 6、安装cli脚手架 1、nvm 介绍 NVM 全称 node.js version management ,专门针对 node 版本进行管理的工具,通过它可以安装和切换不同版本的…...

【Yii2】数据库查询方法总结
目录 1.查找单个记录: 2.查找多个记录: 3.条件查询: 4.关联查询: 假设User模型有一个名为orders的多对一关联关系。 5.排序和分组: 6.数据操作: 7.事务处理: 8.命令查询: 9…...

区块链的三难困境是什么,如何解决?
人们需要保持社交、工作和睡眠之间的平衡,并且努力和谐相处。同样的概念也反映在区块链的三难困境中。 区块链三难困境是一个术语,指的是现有区块链的局限性:可扩展性、安全性和去中心化。这是一个存在了几十年的设计问题,其问题的…...

oCPC实践录 | oCPM的秘密
前言 笔者从这几方面介绍oCPM,并一一分析平台侧宣称的oCPM相比oCPC的优势,并解开其中的秘密。 1)什么是oCPM? 2)oCPC与oCPM的异同 3)平台宣称oCPM的优势 4)oCPM真正的秘密 5)oCPM下的点击率与…...

【Linux Shell学习笔记】Linux Shell的位置参数与函数
一、位置参数 位置参数,也被称之为位置变量,通过位置参数,可以在执行程序的时候,向程序传递数据 1.1 shell接收参数的方法 1.2 向shell传递参数的方法 二、函数 2.1 函数基础 2.1.1 函数简介 函数本质上就是一个代码块…...

缓存cache和缓冲buffer的区别
近期被这两个词汇困扰了,感觉有本质的区别,搜了一些资料,整理如下 计算机内部的几个部分图如下 缓存(cache) https://baike.baidu.com/item/%E7%BC%93%E5%AD%98 提到缓存(cache),就…...

Vue常见面试问答
vue响应式数据 vue2 Vue2 的对象数据是通过 Object.defineProperty 对每个属性进行监听,当对属性进行读取的时候,就会触发 getter,对属性进行设置的时候,就会触发 setter。 /** * 这里的函数 defineReactive 用来对 Object.def…...

Eureka相关面试题及答案
1、什么是Eureka? Eureka是一个由Netflix开发的服务发现(Service Discovery)工具,它是Spring Cloud生态系统中的一个关键组件。服务发现是微服务架构中的一个重要概念,它允许服务实例在启动时注册自己,以便…...

想要学会JVM调优,先掌握JVM内存模型和JVM运行原理
1、前言 今天将和你一起探讨Java虚拟机(JVM)的性能调优。 JVM算是面试中的高频问题了,通常情况下总会有人问到:请你讲解下 JVM 的内存模型,JVM 的 性能调优做过? 2、为什么 JVM 在 Java 中如此重要 首…...

详解C语言入门程序:HelloWorld.c
#include <stdio.h> // 头文件,使用<>编译系统会在系统头文件目录搜索在C语言中,#include 是预处理指令,用于将指定的头文件内容插入到当前源文件中。这里的 <stdio.h> 是一个标准库头文件,其中包含了与输入输出…...

【elk-day01】es和kibana搭建及验证---Mac-Docker
Mac系统使用Docker下载搭建和验证eskibana Docker下载安装es安装es验证kibana安装kibana验证 Docker下载安装 Docker Desktop官网安装下载地址 说明一下为什么要安装desktop版本的docker,因为docker作为工具使用,我们需要的是开箱即用,没有必…...

探索 3D 图形处理的奥秘
最近一年多来,在 3Dfx、Intel 们的狂轰滥炸中,在 Quake、古墓丽影们的推波助澜下,三维图形已经成为计算机迷眼中的又一个热点。3D 世界到底是怎样的神奇,我们又是怎样享受它的乐趣呢?就让我们来一探究竟吧。 图形基础…...

R语言孟德尔随机化研究工具包(1)---friendly2MR
friendly2MR是孟德尔岁随机化研究中的一个重要补充工具,可以批量探索因素间的因果关系,以及快速填补缺失eaf的数据,但是存在细微差异需要注意。 remotes::install_github("xiechengyong123/friendly2MR") library(friendly2MR)lib…...