vue3项目中axios的常见用法和封装拦截(详细解释)

1、axios的简单介绍

Axios是一个基于Promise的HTTP客户端库,用于浏览器和Node.js环境中发送HTTP请求。它提供了一种简单、易用且功能丰富的方式来与后端服务器进行通信。能够发送常见的HTTP请求,并获得服务端返回的数据。

此外,Axios还提供了许多其他功能,例如设置请求头、处理并发请求、拦截请求和响应等。你可以在Axios的官方文档中了解更多详细信息:

注意:在发送真实的HTTP请求时,请使用适当的URL,并根据需要进行错误处理和数据处理。

 Axios的官网:
Axiosicon-default.png?t=N7T8https://axios-http.com/zh/docs/intro

2、在vue3项目中使用axios

1、新建一个vue3项目,并引入axios的依赖;

npm  install axios

2、创建一个.vue文件,在这个文件中进行axios的演示:

<template><div></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
// 第一步,先引入axios
import axios from 'axios';</script><style  scoped></style>

新建一个spring boot项目,端口号为8080。并设置一些方法用来完成axios的请求发送。

@PostMappingpublic String login(@RequestBody DtoLogin dtoLogin){System.out.println(dtoLogin);return "注册成功";}

3、前端使用原始axios来发送请求:

const getLogin =() => {axios.post('http://localhost:8080/login',LoginData.value).then(res => {// 成功的回调,res代表了服务器相应的所有数据,包含了响应头,响应体等// 返回的数据在res.data中,状态码在res.status中console.log(res)
}).catch(error=>{// 失败的回调// error 代表错误信息console.log(error)
})
}

发送请求后,响应结果:

4、前端使用async awits来发送axios请求:

const getLogin =async() => {let result=   await axios.post('http://localhost:8080/login',LoginData.value)// 返回的数据在result.data中,状态码在result.status中// 注意:axios返回的result是一个Promise对象,所以可以使用async和await来简化处理
console.log(result)}

发送请求后,响应结果:

可以看到这种方式与直接使用axios发送效果是一样的;

5、新建一个.ts或(.js)文件,来封装axios,这样就不用持续写请求的域名了;

新建一个request.ts文件,并在这个文件中对axios进行封装:

import axios from "axios";// 创建 axios 实例
const request = axios.create({baseURL: 'http://localhost:8080', // 设置基础URLtimeout: 5000, // 设置超时时间});// 交出去,共这个项目中的其他组件使用
export default request;

在要使用的组件中引入request然后直接使用即可,使用request的方法与之前使用axios的方法一样


import  request  from '@/components/request';

还是之前的方法:

const getLogin =async() => {let result=  await request.post('/login',LoginData.value)
console.log(result)
}

可以看到使用的方法没有什么不同,只是少写了请求域名等,直接在8080这个接口下拼接上相应的路径即可;

发送请求后,响应结果:

可以看到,结果还是一样的;

3、axios的请求拦截与响应拦截

我还是在之前request.ts文件中来进行axios的请求与响应拦截。这一部分内容是非常重要的;

import axios from "axios";// 创建 axios 实例
const request = axios.create({baseURL: 'http://localhost:8080', // 设置基础URLtimeout: 5000, // 设置超时时间});// 请求拦截器
request.interceptors.request.use(config => {// 在请求发送之前做一些处理,例如添加 token 等// config.headers.token = getToken();console.log('请求拦截前')return config;},error => {// 请求错误处理return Promise.reject(error);});// 响应拦截器request.interceptors.response.use(response => {console.log('响应拦截前')// 在这里对响应进行处理,例如统一处理错误码等if (response.data.code !== 200) {return Promise.reject(new Error(response.data.message));}return response.data;},error => {// 响应错误处理return Promise.reject(error);});// 交出去,共这个项目中的其他组件使用
export default request;

运行结果如下:

可以看到我们在axios拦截器中定义的语句都得到了相应的实现;

axios的请求拦截和响应拦截在我们的项目中使用的频率是非常高的,我们的token可以放在请求拦截中(搭配pinia进行实现),我们要做访问页面失败的重定向可以放在相应拦截中(搭配路由可以实现页面的跳转)。


 

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

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

相关文章

C++ queue

目录 一、介绍 二、queue使用 三、模拟实现 四、优先级队列 五、priority_queue使用 OJ题&#xff1a;215. 数组中的第K个最大元素 快速排序 优先级队列 TOPK 六、模拟实现priority_queue 1、仿函数 2、优先级队列类 3、测试函数 一、介绍 1、队列是一种容器适配器…

【手搓深度学习算法】用线性回归预测波士顿房价

线性回归 线性回归是一种监督学习方法&#xff0c;用于建立因变量与一个或多个自变量之间的关系。线性回归的目标是找到一条直线&#xff0c;使得所有数据点到这条直线的距离之和最小。 线性回归的基本形式如下&#xff1a; y β 0 β 1 x 1 β 2 x 2 . . . β n x n ϵ…

mysql基础-常用函数汇总

目录 1. 查询技巧 2. 时间函数 2.1 now() 2.2 current_date() 2.3 时间差timestampdiff&#xff08;&#xff09;与datediff&#xff08;&#xff09; 2.4 其他时间函数 3. 字符函数 3.1 截取函数 3.2 分割函数 3.3 left与right函数 3.4 其他函数 4. 数字函数 5. …

自定义HBase负载均衡器MyCustomBalancer实现步骤与代码解析

目录 1.HBase默认负载均衡策略 1.1 负载均衡总体流程 1.2 不能触发负载均衡的情况 1.3 负载均衡算法 2.自定义的 HBase 负载均衡器的步骤 3.MyCustomBalancer的代码细节 3.1 balanceCluster 方法的作用 3.2balanceCluster 对数据的影响 3.3监控HBase的性能指标 3.3.…

在国内 PMP 有多少含金量?

在我国大陆&#xff0c;有好多证书被商业化得太重了&#xff0c;甚至演变成了个人或一些公司摇钱的工具。所以有些证书受人吹捧它崛起的快&#xff0c;但是活不长&#xff0c;甚至“夭折”&#xff0c;比如以前微软系列的证书&#xff1b; 而PMP认证从国外引进大陆这么多年了&…

PMP认证考试详细备考攻略,全是干货!

要明白&#xff0c;虽然PMP备考考试只是一时的过程&#xff0c;但通过PMP获得的证书和能力是永久的。 这不仅仅是因为我拿到了PMP培训结业证书和PMP认证证书这两个证明&#xff0c;更重要的是在参加PMP认证考试的整个过程中&#xff0c;我学到了很多关于项目管理的知识&#x…

Python基础入门第九课笔记(文件和文件夹)

1&#xff0c;新建文本并且写内容 a open(1.text,w) a.write("""aaa bbb ccc""") a.close() 2,seek( )移动文件指针 文件对象.seek(偏移量&#xff0c;起始位置) # 起始位置&#xff1a;0开头&#xff0c;1当前位置&#xff0c;2文件结尾…

获取深层次字段报错TypeError: Cannot read properties of undefined (reading ‘title‘)

动态生成菜单时报错,不能多层获取路由meta下面的title字段 <template><p>{{ meneList }}</p><template v-for"item in meneList" :key"item.path"><el-menu-item v-if"!item.children"><template #title>{…

一键了解获取网页requests方式

目录 一、爬虫原理&#xff1a; 二、安装&#xff1a; 测试&#xff1a; 三、文件的操作 方式一 方式二: 方式三 四、认识User-Agent 4.1、为什么用User-Agent&#xff1a; 步骤&#xff1a; 五、请求方式 5.1、get 5.2、post 六、爬出有中国关键字页面案例 一、爬…

小型图书借阅管理系统

springbootmybatismysqlthymeleafjquery构建的小型图书借阅管理系统后端 1.springboot 2.mybatis数据库 1.mysql前端 1.jquery 2.jquery-validate 3.htmlcss

【性能测试入门】:压力测试概念!

压力测试可以验证软件应用程序的稳定性和可靠性。压力测试的目标是评估软件在极端负载条件下的鲁棒性和错误处理能力&#xff0c;并确保软件在紧急情况下不会崩溃。它甚至可以进行超出软件正常工作条件的测试&#xff0c;并评估软件在极端条件下的工作方式。 在软件工程中&…

Linux 上 Nginx 配置访问 web 服务器及配置 https 访问配置过程记录

目录 一、前言说明二、配置思路三、开始修改配置四、结尾 一、前言说明 最近自己搭建了个 Blog 网站&#xff0c;想把网站部署到服务器上面&#xff0c;本文记录一下搭建过程中 Nginx 配置请求转发的过程。 二、配置思路 web项目已经在服务器上面运行起来了&#xff0c;运行的端…

WPS使用技巧——默认粘贴无格式文本

从网页或者其他文档内复制的文本往往带有原本的格式&#xff0c;粘贴到自己的word文档里面&#xff0c;要么先粘贴后统一格式&#xff0c;要么右键选择“只粘贴文本”&#xff0c;非常不便。 今天分享一个可以将粘贴方式默认为“只粘贴文本”的无格式粘贴方法&#xff0c;这样…

pycharm的使用技巧

1.新建文件时,自动生成代码 settings->editor->file and code templates,选择python script ${NAME} 文件名 ${DATE} 日期 2.自动补齐自定义段落 settings->editor->live templates,在右侧点击+号,添加自定义的内容 完成之后,在下方勾选python 3.修改注释的…

(23)Linux的软硬连接

前言&#xff1a;上一章我们讲解了 inode&#xff0c;为文件系统收了尾&#xff0c;这几章我们充分地讲解完了文件系统的知识点&#xff0c;现在我们开始开始学习软硬链接了。 软硬链接 1、Linux 下的快捷方式&#xff1a;软链接 上一章我们介绍完了 inode &#xff0c;我们…

【C语言】Linux实现高并发处理的过程

一、实现高并发的几种策略 C语言本身并没有内建的多线程支持&#xff08;新版C语言支持&#xff0c;但用得不多&#xff09;&#xff0c;但是在多数操作系统中&#xff0c;可以使用库来实现多线程编程。例如&#xff0c;在POSIX兼容系统上&#xff0c;可以使用 pthreads 库来创…

FindMy技术用于键盘

键盘是我们生活中不可或缺的输入工具&#xff0c;是人与计算机之间沟通的桥梁&#xff0c;无论是编写文档、浏览网页、玩游戏、或是进行复杂的数据分析&#xff0c;键盘都在其中发挥着关键的作用。此外&#xff0c;键盘还是各种软件的快捷键操作的关键。通过熟练地运用快捷键&a…

vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第3节

ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标&#xff1a;打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。 之前使用layui是时候 狠心升级下了。 …

Linux网络的命令和配置

目录 一、网络配置命令 1、配置和管理网络接口 1.1 ifconfig 1.2 ip 1.2.1 ip link 1.2.2 ip addr 1.3 修改网络接口名 1.3.1 临时修改网络接口名 1.3.2 永久修改网络接口名 1.4 永久配置单网卡 1.5 永久配置双网卡 1.6 ethtool 2、查看和设置主机中路由表信息…

“第四个中国人民警察节”细语

今&#xff08;2024年1月10日&#xff09;天&#xff0c;是第四个中国人民警察节&#xff0c;本“人民体验官”推广人民日报官方微博文化产品《一起致敬人民警察&#xff01;》。 图&#xff1a;来源“人民体验官”推广平台 笔者认同“平安的密码叫110”这个洽当比喻。因为人民…