Vue3项目基于Axios封装request请求

        在 Vue 3 的项目开发中,使用 Axios 进行 HTTP 请求是非常常见的作法,为了更方便开发者更高效的进行代码编写和项目的维护,可以通过再次封装 Axios 来实现。

        在本文中,博主将详细指导你如何在自己的 Vue 3 项目中使用 Axios 二次封装 request 请求。

1.安装 Axios

        首先,确保我们的 Vue 3 项目已经安装了 Axios 。

如果尚未安装 Axios ,则可以定位到项目根目录下 (与src目录同级) ,运行命令行:

# 使用 npm 包管理器
npm install axios# 使用 yarn 包管理器
npm add axios# 使用 pnpm 包管理器
pnpm install axios

         随后,我们查看 package.json 配置文件中是否包含了 Axios 的配置信息:7090cc72391a41c08d1f35a4d996d456.png

 2.创建请求封装模块

        在项目中创建一个单独的模块用来封装 Axios 请求。(博主这里是 src/utils/request.ts)

第一步:创建一个新的 Axios 实例

/* request.ts  这里博主用的是 TypeScript */// 引入 Axios 库的功能,AxiosInstance 是 Axios 中自带的接口类型
import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';      // 按需引入 Element-Plus 组件// 第一步:创建一个新的 Axios 实例
const service: AxiosInstance = axios.create({// 这里博主直接引用了开发环境配置文件中的路径, 也可自定义成网络地址baseURL: import.meta.env.VITE_API_URL,  // 或 http://${host}:${port}timeout: 5000,  // 设置请求超时,一般来说为 5 秒// 设置请求头类型:若非文件传输,一般情况下为 jsonheaders: { 'Content-Type': 'application/json' },  // 传输文件: multipart/form-data/* 自定义 Axios 的参数序列化过程* paramsSerializer 是 Axios 中的一个配置项,用于定义在发送 GET 请求时如何序列化 URL 参数* serialize 是一个自定义的方法,它接收一个 params 对象作为参数,并返回一个字符串* 在这里,它使用了 qs(可能是 querystring 库)来将参数对象 params 序列化为一个 URL 查询字符串* 这里的 qs.stringify 函数是一个用于序列化对象为 URL 查询字符串的方法*/paramsSerializer: {serialize(params) {return qs.stringify(params, { allowDots: true });}}
})

第二步:创建请求拦截器

// request.ts 文件中/** 已经完成了第一步*/// 第二步:创建请求拦截器
service.interceptors.request.use((config) => {// 这里可以在我们发送 request 网络请求前,为我们的 request 请求做一些配置// 例如:将 token 携带在请求头中config.headers!['Authorization'] = `Token ${Session.get('token')}`;return config},(error) => {// 错误调试return Promise.reject(error)}
)

 第三步:创建响应拦截器

/* request.ts 文件中 *//** 已完成第一步** 已完成第二步*/// 第三步:创建请求拦截器
service.interceptors.response.use((response) => {// 在这里,你可以对从后端拿到的数据进行处理const res = response.data;if (res.code === 400 || res.code === 401 || res.code === 403) {// 如果没有权限,可以清除浏览器中缓存的 session 信息Session.clear(); // 清除浏览器全部临时缓存window.location.href = '/'; // 去登录页ElMessageBox.alert('你已被登出,请重新登录', '提示', {}).then(() => { }).catch(() => { });return Promise.reject(service.interceptors.response);} else {return res;}},(error) => {// 对响应错误做点什么if (error.message.indexOf('timeout') != -1) {ElMessage.error('网络超时');} else if (error.message == 'Network Error') {ElMessage.error('网络连接错误');} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error('接口路径找不到');}return Promise.reject(error);}
)

 第四步:导出 Axios 实例

/* request.ts 文件中 *//** 已完成了上述三个步骤*/// 导出 axios 实例
export default service;

完整代码如下:

import axios, { AxiosInstance } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import qs from 'qs';// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 50000,headers: { 'Content-Type': 'multipart/form-data' },paramsSerializer: {serialize(params) {return qs.stringify(params, { allowDots: true });},},
});// 添加请求拦截器
service.interceptors.request.use((config) => {// 在发送请求之前做些什么 tokenif (Session.get('token')) {config.headers!['Authorization'] = `DavyJonesZ ${Session.get('token')}`;}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
service.interceptors.response.use((response) => {// 对响应数据做点什么const res = response.data;if (res.code && res.code !== 0) {// `token` 过期或者账号已在别处登录if (res.code === 401 || res.code === 4001) {Session.clear(); // 清除浏览器全部临时缓存window.location.href = '/'; // 去登录页ElMessageBox.alert('你已被登出,请重新登录', '提示', {}).then(() => { }).catch(() => { });return Promise.reject(service.interceptors.response);} else {return res;}} else {return res;}},(error) => {// 对响应错误做点什么if (error.message.indexOf('timeout') != -1) {ElMessage.error('网络超时');} else if (error.message == 'Network Error') {ElMessage.error('网络连接错误');} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error('接口路径找不到');}return Promise.reject(error);}
);// 导出 axios 实例
export default service;

3. 使用

        完成上述对于 Axios 的二次封装后,我们就可以在其他地方进行调用了

/* Vue 3 接口工具类:login.ts 文件中 */
import request from '/@/utils/request';// Login Api
export function login(data: object) {return request({url: '/user/login',method: 'POST',data})
}

        最后,只需要在Vue组件中,引入 login.ts 文件,并调用其 login 方法,就可以实现与后端接口的通信啦!(大功告成!!!)

 

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

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

相关文章

浅谈Git

一:什么是 git git一种开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。 下图是 git 的一个工作流程简图 二:什么是 分布/集中式版本控制系统 软件开发过程中,要解决多人协作的问题,需要…

Java之split 方法

方法的工作原理 split 方法首先检查字符串中是否存在指定的分隔符。如果存在,它会在每个分隔符处切割字符串,生成一个新的字符串数组。如果字符串中没有指定的分隔符,或者分隔符是非空字符但在字符串中不存在,则 split 方法会返回…

基于LSTM及其变体的回归预测

1 所用模型 代码中用到了以下模型: 1. LSTM(Long Short-Term Memory):长短时记忆网络,是一种特殊的RNN(循环神经网络),能够解决传统RNN在处理长序列时出现的梯度消失或爆炸的问题。L…

挂耳式蓝牙耳机什么牌子好?这五款综合表现遥遥领先

为什么这几年开放式耳机受到了越来越多消费者的喜爱?我想是因为它全方位的弥补了入耳式耳机堵塞耳朵、不够安全健康的缺陷,真正做到了安全性与舒适性兼得。那么刚入坑开放式耳机的小白该如何挑选一款品质较高的开放式耳机呢?挂耳式蓝牙耳机什…

微服务中的 “负载均衡策略” 简介

微服务中的负载均衡策略是确保系统高可用性和高性能的关键技术之一。这些策略通过合理地将请求分配给多个服务实例,以实现资源的优化利用和请求的均衡处理。 本文选取以下几种常见的微服务负载均衡策略,并对其功能作简要介绍: 轮询&#xf…

2024年公路水运工程施工企业安全生产管理人员证模拟考试题库及公路水运工程施工企业安全生产管理人员理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2024年公路水运工程施工企业安全生产管理人员证模拟考试题库及公路水运工程施工企业安全生产管理人员理论考试试题是由安全生产模拟考试一点通提供,公路水运工程施工企业安全生产管理人员证模拟考试题库是…

Qt 实战(7)元对象系统 | 7.3、QMetaObject

文章目录 一、QMetaObject1、什么是QMetaObject?2、QMetaObject提供的主要功能3、如何使用QMetaObject?3.1、获取类的元对象3.2、动态调用方法3.3、读写属性 4、高级应用4.1、动态创建对象4.2、利用QMetaObject进行插件管理 5、总结 前言: 在…

模块化和包管理工具

一,模块化 1.定义 将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为 模块化 其中拆分出的 每个文件就是一个模块 ,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用 2.模块化…

博客最细 STM32CubeProgrammer 使用教程(学不会来找我)

前言:编写不易,仅供参考学习,请勿搬运 文章相关介绍 本篇主要是介绍 STM32CubeProgrammer 烧录软件的使用过程,随着ST开发生态已经完成闭环,(STM32CubleMX配置代码 STM32IDE写代码 STM32CubeProgramm…

【代码随想录_Day30】1049. 最后一块石头的重量 II 494. 目标和 474.一和零

Day30 OK,今日份的打卡!第三十天 以下是今日份的总结最后一块石头的重量 II目标和一和零 以下是今日份的总结 1049 最后一块石头的重量 II 494 目标和 474 一和零 今天的题目难度不低,掌握技巧了就会很简单,尽量还是写一些简洁代…

【时时三省】tessy 集成测试:小白入门指导手册

目录 1,创建集成测试模块且分析源文件 2,设置测试环境 3,TIE界面设置相关函数 4,SCE界面增加用例 5,编辑数据 6,用例所对应的测试函数序列 7,添加 work task 函数 8,为测试场景添加函数 9,为函数赋值 10,编辑时间序列的数值 11,执行用例 12,其他注意事项…

Transformer中Decoder的计算过程及各部分维度变化

在Transformer模型中,解码器的计算过程涉及多个步骤,主要包括自注意力机制、编码器-解码器注意力和前馈神经网络。以下是解码器的详细计算过程及数据维度变化: 1. 输入嵌入和位置编码 解码器的输入首先经过嵌入层和位置编码: I…

C++的链接指示extern “C“

目录 链接指示extern "C"A.What(概念)B.Why(extern "C"的作用)C.How (如何使用链接指示extern "C") 链接指示extern “C” A.What(概念) extern&quo…

Python每日一题:回文数

题干 给你一个整数 x ,如果 x 是一个回文整数,返回 true ;否则,返回 false 。 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数。例如,121 是回文&#xff0…

C语言赋值浮点数时候立即数后面加上f的意义和注意事项

在C语言中常见定义浮点数时会在立即数的后面加上f表明它是一个浮点数: float a 3.14159265f; 或者 #define t 3.14159265f; 但是在使用它时应注意一个事情,当你在立即数后面加上f时,编译器会认为它是一个float,当你在用它定义…

T113-i 倒车低概率性无反应,没有进入倒车视频界面

背景 硬件:T113-i + emmc 软件:uboot2018 + linux5.4 + QT应用 分支:longan 问题 T113-i系统倒车时偶发无反应,没有进入倒车视频界面。 倒车无反应问题排查 先在倒车驱动的中断检测接口里添加打印,以确定倒车无反应时系统是否检测到中断状态,如下图所示。 static int ca…

各种机器学习模型

一、监督学习 线性回归(Linear Regression) 多项式回归(Polynomial Regression) 岭回归(Ridge Regression) Lasso回归(Lasso Regression) 弹性网络回归(Elastic Net Reg…

AI基于大模型语言存在的网络安全风险

目的: 随着大语言模型(LLM)各领域的广泛应用,我们迫切需要了解其中潜在的风险和威胁,及时进行有效的防御。 申明: AI技术的普及正当的使用大模型技术带来的便利,切勿使用与非法用途&#xff…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【获取密钥属性(ArkTS)】

获取密钥属性(ArkTS) HUKS提供了接口供业务获取指定密钥的相关属性。在获取指定密钥属性前,需要确保已在HUKS中生成或导入持久化存储的密钥。 开发步骤 指定待查询的密钥别名keyAlias,密钥别名最大长度为64字节。调用接口[getKeyItemProperties]&…

MongoDB教程(七):mongoDB分片

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言MongoDB 分…