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或模型,或在生产环…

LeetCode 第402场周赛个人题解

目录 100304. 构成整天的下标对数目 I 原题链接 思路分析 AC代码 100301. 构成整天的下标对数目 II 原题链接 思路分析 AC代码 100316. 施咒的最大总伤害 原题链接 思路分析 AC代码 100317. 数组中的峰值 原题链接 思路分析 AC代码 100304. 构成整天的下…

File API以及相关概念

一、Blob Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ​ReadableStream 来用于数据操作。 构造方法 new Blob(blobParts) new Blob(blobParts,options) blobParts是一个可迭代对象(就是能…

深度学习:PyCharm中运行Bash脚本

GitHub上的开源代码有很多是用 Bash 脚本来自动化数据处理、模型训练和模型评估等任务的,如何使用PyCharm来运行Bash脚本,从而快速上手GitHub开源代码,是一个实用的技巧,本文主要介绍PyCharm中运行Bash脚本的方法。 PyCharm 是一个…

「实战应用」如何用图表控件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):一般是在特…

Fortran 编程整理

Fortran编程语法整理 01 Fortran 中的程序单元1-1 submodule(子模块) 02 子程序与函数2-1 概述2-2 函数与子程序特性(1)为函数结果指定不同名称 03 stop命令后跟说明04 do concurrent4-1 do concurrent 的使用 05 纯过程&#xff…

Docker Jenkins(改错版本)

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

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

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

ubantu 计算一个文件夹内的文件数量命令

ubantu 计算一个文件夹内的文件数量命令 在Ubuntu中,你可以使用find命令来计算一个文件夹内的文件数量。以下是一个基本的命令示例: find /path/to/directory -type f | wc -l这里的/path/to/directory是你想要计算文件数量的文件夹的路径。find命令会…

蓝队-溯源技巧

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

Web前端网页源代码:深入剖析与实用技巧

Web前端网页源代码:深入剖析与实用技巧 在Web开发的浩瀚领域中,前端网页源代码扮演着至关重要的角色。它不仅是网页的骨架,更是实现各种交互和视觉效果的基石。本文将从四个方面、五个方面、六个方面和七个方面,对Web前端网页源代…

C# OpenCvSharp 矩阵计算-determinant、trace、eigen、calcCovarMatrix、solve

🚀 在C#中使用OpenCvSharp库进行矩阵操作和图像处理 在C#中使用OpenCvSharp库,可以实现各种矩阵操作和图像处理功能。以下是对所列函数的详细解释和示例,包括运算过程和结果。📊✨ 1. determinant - 计算行列式 🧮 定义: double determinant(InputArray mtx); 参数…

web前端网页实例:深度剖析与实践指南

web前端网页实例:深度剖析与实践指南 在数字化时代的浪潮中,web前端网页已成为企业与用户之间的桥梁,承载着信息的传递与交互的重任。本文将通过四个方面、五个方面、六个方面和七个方面的详细剖析,带您深入了解web前端网页实例的…

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

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

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

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

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

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