Axios进阶

       

目录

axios实例

axios请求配置

拦截器

    请求拦截器

    响应拦截器

取消请求


        axios不仅仅是简单的用基础请求用法的形式向服务器请求数据,一旦请求的端口与次数变多之后,简单的请求用法会有些许麻烦。所以,axios允许我们进行创建axios实例、axios配置、拦截器、取消请求等操作。

axios实例

        后端接口有很多,每个接口中可以获得数据有所不同,我们可以使用不同的axios实例向不同的接口发送请求。

        创建axios实例时可以为其设置请求配置,使用该实例发送的请求都i会有相同的部分配置。其配置细节在下面的axios配置中。

        axios实例是通过axios.create创建的:

    //使用axios.create创建一个axios实例const instance = axios.create({//设置baseURL,它会自动添加在发送请求时的url前面//使用实例发送请求时便不用书写很长的urlbaseURL: "http://localhost:3000/",//设置超时时间,如果请求未在该时间范围内完成,则请求失败//此处的时间单位是mstimeout: 3000});

        使用axios实例:        

instance.get('post').then((res) => {console.log(res);})

        

axios请求配置

        axios配置是发送请求时的可选项,只有url是必须的,method默认是GET方法。axios配置通常与axios实例结合使用,直接在axios实例中添加配置,对在一个接口的所有请求设置“要求”。

        1、baseURL:使用实例发送请求时,baseURL会自动添加在请求的url前面,除非url时绝对路径。

        2、headers:自定义请求头。

        3、params:请求参数,会与请求一起发送给服务器,服务器通过参数查找数据并返回。

        4、data:请求体,包含需要发送的数据,仅适用于"POST"."PUT"."PATCH"."DELETE"方法。

        5、timeout:超时时长,单位是毫秒(ms),如果请求超过"timeout"的值,则请求会中断

以上是axios常用的请求配置,想要了解更多,请参考axios请求配置

拦截器

        拦截器可以让你在请求发送到服务器之前或响应从服务器返回之后,对请求或响应进行预处理或后处理。这在实现诸如日志记录、身份验证、错误处理、数据转换或重试逻辑等方面特别有用。        

        axios的拦截分为请求拦截器和响应拦截器。

    请求拦截器

        请求拦截器故名思意便是对请求进行拦截,在请求发送到服务器之前进行自定义操作,如身份验证、数据转换等。

        设置请求拦截器并设置自定义操作:

    //设置请求拦截器,此处的config参数代表请求配置axios.interceptors.request.use((config) => {//在发送请求之前在控制台上输出console.log("请求拦截器 成功");return config; //一定要将拦截的config返回。否则无法进行数据请求},(err) => {//请求错误之后console.log("请求拦截器 失败");return Promise.reject(err);  //请求错误时的逻辑处理});

    响应拦截器

        响应拦截器故名思意便是对服务器的响应进行拦截,在响应返回之前进行自定义操作。

         设置响应拦截器并设置自定义操作:

    //设置响应拦截器,此处的res代表服务器返回的数据对象axios.interceptors.response.use((res) => {//状态码在 2xx 范围内触发console.log("响应拦截器 成功");//对响应数据的自定义操作return res.data; //只返回res的data},(err) => {//状态码超出 2xx 范围触发console.log("响应拦截器 失败");//对响应错误的处理return Promise.reject(err);});

        对服务器发送请求:

    axios.get('http://localhost:3000/post').then((res) => {console.log(res);console.log("数据请求成功");}).catch((err) => {console.log(err);})

        结果:

取消请求

        取消请求用于取消正在进行的请求。

        由于取消请求我们不常用,所以了解即可。

    const sourse = axios.CancelToken.source();axios.get('http://localhost:3000/post',{cancelToken: sourse.token}).then((res) => {console.log(res);});//取消请求sourse.cancel("请求已取消");

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

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

相关文章

Retrofit 注解参数详解

添加依赖 implementation com.squareup.retrofit2:retrofit:2.9.0 implementation com.squareup.retrofit2:converter-gson:2.9.0 初始化Retrofit val retrofit Retrofit.Builder().baseUrl("http://api.github.com/").addConverterFactory(GsonConverterFactory…

【Kafka】Kafka提高生产者吞吐量、数据可靠性-06

【Kafka】Kafka提高生产者吞吐量-06 1. 提高生产者吞吐量2.数据可靠性2.1 回顾数据的发送流程2.2 ack应答级别2.2.1 acks:02.2.2 acks:12.2.2 acks:-1(all)2.2.2.1 数据可靠性分析2.2.2.2 数据完全可靠 2.3 可靠性总结2.4 可靠性代码配置 1. 提高生产者吞吐量 import org.apach…

科技云报道:“元年”之后,生成式AI将走向何方?

科技云报道原创。 近两年,以大模型为代表的生成式AI技术,成为引爆数字原生最重要的技术奇点,人们见证了各类文生应用的进展速度。Gartner预测,到2026年,超过80%的企业将使用生成式AI的API或模型,或在生产环…

「实战应用」如何用图表控件LightningChart JS创建SQL仪表板应用(二)

LightningChart JS是Web上性能特高的图表库,具有出色的执行性能 - 使用高数据速率同时监控数十个数据源。 GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画,常用于贸易,工程,航…

OpenCore 引导完美升级

备份原有 OC (做好回滚的准备下载新版 OpenCore https://github.com/acidanthera/OpenCorePkg/releases将 1, 3, 4 里面的文件使用新版进行替换 4 里面的文件严格来说并不需要, 只是留着方便使用不追求完美到这就可以收工了将 OC 复制到 U 盘 EFI U 盘格式化可以使用: diskutil…

微服务开发与实战Day09 - Elasticsearch

一、DSL查询 Elasticsearch提供了DSL(Domain Specific Language)查询,就是以JSON格式来定义查询条件。类似这样: DSL查询可以分为两大类: 叶子查询(Leaf query clauses):一般是在特…

Docker Jenkins(改错版本)

Devops:它强调开发(Development)和运维(Operations)团队之间的协作.实现更快,更可靠的软件交付部署. JenKins是一个开源的自动化服务器,广泛用于构建,测试和部署软件项目.它是持续集成(CI)和持续交付/部署(CD)的工具.JenKins是实现DevOps实践的重要工具. 前端项目部署一般流程:…

Matlab|基于V图的配电网电动汽车充电站选址定容-可视化

1主要内容 基于粒子群算法的电动汽车充电站和光伏最优选址和定容 关键词:选址定容 电动汽车 充电站位置 仿真平台:MATLAB 主要内容:代码主要做的是一个电动汽车充电站和分布式光伏的选址定容问题,提出了能够计及地理因素和服…

蓝队-溯源技巧

溯源技巧 大致思想 通常情况下,接到溯源任务时,获得的信息如下 攻击时间 攻击 IP 预警平台 攻击类型 恶意文件 受攻击域名/IP其中攻击 IP、攻击类型、恶意文件、攻击详情是溯源入手的点。 通过攻击类型分析攻击详情的请求包,看有没有攻击者…

实在智能应邀出席中国移动科技工作者论坛,分享基于大模型+Agent智能体的“企业大脑”

为大力弘扬科学家精神,激励广大科技工作者践行科技报国、创新为民,争做高水平科技自立自强排头兵,6月6日,中国移动在线营销服务中心(以下简称“在线中心”)“2024年科技工作者大讲堂暨青年创新创效论坛”于…

Matlab|基于手肘法的kmeans聚类数的精确识别【K-means聚类】

主要内容 在电力系统调度研究过程中,由于全年涉及的风、光和负荷曲线较多,为了分析出典型场景,很多时候就用到聚类算法,而K-means聚类就是常用到聚类算法,但是对于K-means聚类算法,需要自行指定分类数&…

C/C++:指针用法详解

C/C:指针 指针概念 指针变量也是一个变量 指针存放的内容是一个地址,该地址指向一块内存空间 指针是一种数据类型 指针变量定义 内存最小单位:BYTE字节(比特) 对于内存,每个BYTE都有一个唯一不同的编号…

赶紧转行大模型,预计风口就今年一年,明年市场就饱和了!不是开玩笑

恕我直言,就这几天,各大厂都在裁员,什么开发测试运维都裁,只有大模型是急招人。 你说你不知道大模型是什么?那可太对了,你不知道说明别人也不知道,就是要趁只有业内部分人知道的时候入局&#…

String常用方法详解

auth:别晃我的可乐 date:2024年06月16日 比较大小 equals(Object obj): 用于比较字符串内容是否相等。compareTo(String anotherString): 按字典顺序比较两个字符串。 String str1 "hello"; String str2 "world";boolean isEqual …

配置Linux DNS服务器作为自己的windows 的 DNS服务器和 配置遇到的问题

安装DNS 库 和 DNS工具: # bind 是用于创建 dns服务的, bind-utils是用于测试DNS服务的工具 yum -y install bind bind-utils配置主配置文件: # 下载好后就已经有DNS服务,但是需要你自己去配置DNS服务信息# 配置主配置文件 [rootl…

SylixOS下UDP组播测试程序

SylixOS下UDP组播测试 测试效果截图如下: udp组播发送测试程序。 /********************************************************************************************************* ** ** 中国软件开源组织 ** ** …

vue的安装配置并创建项目

npm 工具的安装 安装node.js之后,npm工具会自动安装到系统环境中 网址:https://nodejs.org/en vue的安装 安装vue并创建项目 npm create vuelatest 进入项目之后,然后启动npm run dev 解决方法: npm install -g create-vite 再次启动 通…

13.泛型、trait和生命周期(下)

目录 6. 生命周期与引用有效性6.1 生命周期引入6.2 得到长度最大的String值6.3 生命周期标注语法1)说明2)普通标注示例3)函数参数中的生命周期标注 6.4 深入理解生命周期6.5 结构体定义中的生命周期标注6.6 生命周期省略 6.7 方法定义中的生命…

应急响应 | 基本技能 | 01-系统排查

系统排查 目录 系统基本信息 Windows系统Linux系统 用户信息 Windows系统 1、命令行方式2、图形界面方法3、注册表方法4、wmic方法 Linux系统 查看所有用户信息分析超级权限账户查看可登录的用户查看用户错误的登录信息查看所有用户最后的登录信息查看用户最近登录信息查看当…

机器学习周报第46周

目录 摘要Abstract一、文献阅读1.1 摘要1.2 研究背景1.3 论文方法1.4 模块分析1.5 网络规格1.6 高效的端到端对象检测1.7 mobile former模块代码 目录 摘要Abstract一、文献阅读1.1 摘要1.2 研究背景1.3 论文方法1.4 模块分析1.5 网络规格1.6 高效的端到端对象检测1.7 mobile f…