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.rhkb.cn/news/356935.html

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

相关文章

Python基础入门

目录 1. 什么是Python? 2. 安装Python 3. Python基础语法 4. 数据结构 5. 文件操作 6. Python标准库 总结 1. 什么是Python? Python是一种高级编程语言,由Guido van Rossum于1991年发布。它以其简单易读的语法和强大的功能而闻名&…

DataWhale - 吃瓜教程学习笔记(二)

学习视频:第3章-一元线性回归_哔哩哔哩_bilibili 西瓜书对应章节: 3.1 - 3.2 一元线性回归 - 最小二乘法 - 极大似然估计 - 梯度 多元函数的一阶导数 - 海塞矩阵 多元函数的二阶导数 - 机器学习三要素

LLC开关电源开发:第四节,LLC软件设计报告

LLC源代码链接 数控全桥LLC开发板软件设计报告  1. LLC硬件及软件框架2. LLC软件设计2.1 工程文件说明2.2 LLC中断设计2.2.1 20us中断2.2.2 5ms中断 2.3 LLC状态机设计2.3.1 初始化状态2.3.2 空闲状态2.3.3 软启动状态2.3.4 正常运行状态2.3.5 故障状态 2.4 环路设计2.4.1 环路…

EasyRecovery数据恢复软件2024免费版下载

EasyRecovery数据恢复软件,是我在电脑使用过程中遇到的神器!它不仅功能强大,操作简便,还帮我找回了丢失的重要文件。今天,我就来给大家分享一下我的使用体验和心得。 让我来介绍一下EasyRecovery的功能。这款软件可以恢…

【字符串 状态机动态规划】1320. 二指输入的的最小距离

本文涉及知识点 动态规划汇总 字符串 状态机动态规划 LeetCode1320. 二指输入的的最小距离 二指输入法定制键盘在 X-Y 平面上的布局如上图所示,其中每个大写英文字母都位于某个坐标处。 例如字母 A 位于坐标 (0,0),字母 B 位于坐标 (0,1)&#xff0…

org.springframework.boot:spring-boot-starter-parent:pom:2.3.4.RELEAS

前言 git上拉了一个项目构建过程中无论是clean还是install都报错 注:很看不惯某博主一点简单的经验分享都要开VIP才能查看的作风 org.springframework.boot:spring-boot-starter-parent:pom:2.3.4.RELEASE failed to transfer from https://maven.aliyun.com/rep…

3D视觉引导机器人提升生产线的自动化水平和智能化程度

随着智能化技术的不断发展,汽车制造企业正积极寻求提升智能化水平的途径。富唯智能的3D视觉引导机器人抓取技术为汽车制造企业提供了一种高效、智能的自动化解决方案。 项目目标 某汽车制造企业希望通过引入智能化技术提升生产线的自动化水平和智能化程度。他们希望…

湖南(市场调研)源点咨询 新产品上市前市场机会调研与研究分析

湖南源点调研认为:无论是创业公司,还是在公司内部探索新的项目或者新的产品线等,首先都要做“市场机会分析与调研“,要真正思考并解答以下疑问: 我们的目标客户群体是谁,他们如何决策? 我们所…

AI大眼萌探索 AI 新世界:Ollama 使用指南【1】

在人工智能的浪潮中,Ollama 的出现无疑为 Windows 用户带来了一场革命。这款工具平台以其开创性的功能,简化了 AI 模型的开发与应用,让每一位爱好者都能轻松驾驭 AI 的强大力量。大家好,我是AI大眼萌,今天我们将带大家…

CentOS 7.9检测硬盘坏区、实物定位(三)

系列文章目录 CentOS 7.9上创建JBOD(一) CentOS 7.9上创建的JBOD阵列恢复(二) 文章目录 系列文章目录前言一、在系统中找到硬盘对应的盘符二、使用命令定位实物1.badblocks检测坏块2.对2T以上的硬盘检测(对本篇非必要…

SQLite数据库(数据库和链表双向转换)

文章目录 SQLite数据库一、SQLite简介1、SQLite和MySQL2、基于嵌入式的数据库 二、SQLite数据库安装三、SQLite的常用命令四、SQLite的编程操作1、SQLite数据库相关API(1)头文件(2)sqlite3_open()(3)sqlite…

【笔记】【矩阵的二分】668. 乘法表中第k小的数

力扣链接:题目 参考地址:参考 思路:二分查找 把矩阵想象成一维的已排好序的数组,用二分法找第k小的数字。 假设m行n列,则对应一维下标范围是从1到mn,初始: l1; rmn; mid(lr)/2 设mid在第i行&a…

设计模式——设计模式原则

设计模式 设计模式示例代码库地址: https://gitee.com/Jasonpupil/designPatterns 设计模式原则 单一职责原则(SPS): 又称单一功能原则,面向对象五个基本原则(SOLID)之一 原则定义&#xf…

设计模式1-简介

设计模式简介 专栏的目的什么是设计模式设计模式要学什么软件开发原则主流设计模式 学习建议经典面试题 资源 专栏的目的 1.理解松耦合的设计思想 2.掌握面向对象设计原则 3.掌握重构技法改善设计 4.掌握GOF核心设计模式 什么是设计模式 每一个模式描述了一个在我们周围不…

【自动驾驶】运动底盘状态数据:里程计、IMU、运动学分析、串口通信协议

文章目录 控制器与运动底盘状态数据:里程计、IMU运动学分析与轮子运动学分析公式串口通信控制与反馈通讯协议串口通信反馈上行数据帧解析串口通信控制下行数据帧解析代码实现IMU、里程计数据的获取、解析、计算控制器与运动底盘状态数据:里程计、IMU 控制器需要负责外发底盘…

mysql--安装跳过验证修改密码安全加固

安装mysql 配置mysql的yum源 [rootVM-0-14-rockylinux ~]# tee /etc/yum.repos.d/mysql.repo << EOF > [MYSQL] > namemysql > baseurlhttps://mirrors.tuna.tsinghua.edu.cn/mysql/yum/mysql-5.7-community-el7-x86_64 > gpgcheck0 > EOF yum安装mysq…

11、鸿蒙学习—UDID获取方法

一、手机的UDID获取方法如下&#xff1a; 1、打开“设置 > 关于手机”&#xff0c;多次点击版本号&#xff0c;打开开发者模式。 2、打开“设置 > 系统和更新”&#xff0c;在最下方找到“开发人员选项”&#xff0c;打开“USB调试”开关。 3、使用PC连接手机后&#…

Git简单使用和理解

workspace: 本地的工作目录。 index/stage&#xff1a;暂存区域&#xff0c;临时保存本地改动。 local repository: 本地仓库&#xff0c;只想最后一次提交HEAD。 remote repository&#xff1a;远程仓库。 对于Git,首先应该明白第一git是一种分布式版本控制系统&#xff0c;最…

使用ESP32和Flask框架实现温湿度数据监测系统

项目概述 在这个项目中&#xff0c;我们将使用ESP32微控制器读取温湿度传感器的数据&#xff0c;并将这些数据通过HTTP请求传输到基于Flask框架的服务器。Flask是一个轻量级的Python Web框架&#xff0c;非常适合快速开发和部署Web应用。通过这个项目&#xff0c;我们不仅可以了…

非关系型数据库NoSQL数据层解决方案 之 redis springboot整合与读写操作 2024详解以及window版redis5.0.14下载百度网盘

redis下载安装以及基本使用 下载地址 链接&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;0410 一个名对应一个数值 内存级 在内存里进行操作 准备启动 我们现在就有一个redis客户端的服务器了 我们再启动一个cmd 操作redis数据库 redis里面的基本数据类型有五种 …