Axios进阶

news2024/11/25 6:32:34

       

目录

axios实例

axios请求配置

拦截器

    请求拦截器

    响应拦截器

取消请求


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

axios实例

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

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

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

    //使用axios.create创建一个axios实例
    const instance = axios.create({
      //设置baseURL,它会自动添加在发送请求时的url前面
      //使用实例发送请求时便不用书写很长的url
      baseURL: "http://localhost:3000/",
      
      //设置超时时间,如果请求未在该时间范围内完成,则请求失败
      //此处的时间单位是ms
      timeout: 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.coloradmin.cn/o/1828604.html

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

相关文章

MongoDB~分片数据存储Chunk;其迁移原理、影响,以及避免手段

分片数据存储:Chunk存储 Chunk(块) 是 MongoDB 分片集群的一个核心概念,其本质上就是由一组 Document 组成的逻辑数据单元。每个 Chunk 包含一定范围片键的数据,互不相交且并集为全部数据。 分片集群不会记录每条数据…

计算机组成原理之定点除法

文章目录 定点除法运算原码恢复余数法原码不恢复余数法(加减交替法)运算规则 习题 定点除法运算 注意 (1)被除数小于除数的时候,商0 (2)接下来,有一个除数再原来的基础上&#xff0c…

Vue主要使用-03

组件通讯 组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件?父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。 …

【字符串】65. 有效数字

本文涉及知识点 字符串 LeetCode65. 有效数字 给定一个字符串 s ,返回 s 是否是一个 有效数字。 例如,下面的都是有效数字:“2”, “0089”, “-0.1”, “3.14”, “4.”, “-.9”, “2e10”, “-90E3”, “3e7”, “6e-1”, “53.5e93”,…

举例说明 如何通过SparkUI和日志定位任务莫名失败?

有一个Task OOM: 通过概览信息,发现Stage 10的Task 36失败了4次导致Job失败。概览信息中显示最后一次失败的退出代码(exit code)是143,意味着发生了内存溢出(OOM,即Out of Memory)。…

漏洞分析|PHP-CGI Windows平台远程代码执行漏洞(CVE-2024-4577)

1.漏洞描述 CVE-2024-4577导致漏洞产生的本质其实是Windows系统内字符编码转换的Best-Fit特性导致的,相对来说PHP在这个漏洞里更像是一个受害者。 PHP语言在设计时忽略了Windows系统内部对字符编码转换的Best-Fit特性,当PHP运行在Window平台且使用了如…

一键自动粘贴,高效处理邮箱地址,让你的工作效率翻倍提升!

在信息爆炸的时代,邮箱地址已成为我们日常工作和生活中的必备元素。无论是商务沟通、报名注册还是信息传递,邮箱地址都扮演着至关重要的角色。然而,手动复制粘贴邮箱地址的繁琐操作往往让人头疼不已,不仅效率低下,还容…

锁存器的工作原理及其在FPGA设计中的注意事项

锁存器(Latch)是数字电子中常用的一种基本元件,用于在特定的时间点或条件下“锁存”或保存输入的数据值。锁存器对脉冲电平敏感,它只在输入脉冲的高电平(或低电平)期间对输入信号敏感并改变状态。在数字电路…

【原理图PCB专题】案例:为什么要把Cadence原理图符号库设计好

Cadence 原理图符号库设计对于提高设计质量、效率和可维护性具有重要意义。一份好的原理图符合库能够帮助我们更好的达成设计目标: 提高设计效率:拥有一个完善的符号库可以让设计师直接调用所需的符号,避免重复绘制,从而节省时间。 确保设计准确性:统一的符号库可以保证符…

快速压缩前端项目

背景 作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况,这时候需要压缩软件进行压缩文件处理 问题 项目中的依赖包文件非常庞大,严重影响压缩速度,即使想先删除再压缩,删除文件也不会很快完成 解决 首先要安…

一键分析Bulk转录组数据

我们前面介绍了经典的转录组分析流程:Hisat2 Stringtie,可以帮助用户快速获得基因的表达量矩阵。 云上生信,未来已来 | 转录组标准分析流程重磅上线! RNA STAR 也是一款非常流行的转录组数据分析工具。它不仅可以将测序 Reads 比…

博通加速向Nvidia发起进攻 为何连iPhone 15都不能用“苹果智能”?

博通加速向Nvidia发起进攻 博通强调的一项优势是其 XPU 的能效。其功耗不到 600 瓦,是业内功耗最低的 AI 加速器之一。 Nvidia 的许多竞争对手都想抢占其市场主导地位。其中一个不断出现的名字是 Broadcom。仔细观察就会知道原因。其 XPU 功耗不到 600 瓦&#xff…

JavaScript-转换成布尔型

学习目标: 掌握转换成布尔型 学习内容: 显示转换隐式转换 显示转换: Boolean(内容) 记忆:、0、underfined、null、false、NaN转换成布尔值后都是false,其余则为true。 console.log(Boolean(p…

Mac M3 Pro 部署Trino-server-449

目录 1、下载安装包 2、解压并设置配置参数 3、启动并验证 4、使用cli客户端连接测试 1、下载安装包 官方:trino-server-449 CLI 网盘: server https://pan.baidu.com/s/16IH-H39iF8Fb-Vd14f7JPA?pwd3vjp 提取码: 3vjp cli https://pan.baidu.…

react-day1

1.react是什么呢? react是由Meta公司开发,是一个用于构建web和原生交互界面的库 2.react 项目修改文件保存后 ,不能实时更新,需要: 在和package.json文件同目录的地方,新建.env文件:里面加入…

食家巷助力“甘肃乡村振兴,百强主播·打call 甘味”活动

2024年,甘肃省“商务乡村振兴”促消费暨“百强主播打call 甘味”活动在天水市龙城广场盛大启动。 活动现场,来自甘肃省 14 个市州的农特产品展台琳琅满目,让人目不暇接。此次活动中,各企业带来了多款深受消费者喜爱的产品&a…

【MATLAB】(高数)

参考文章 函数极限 导数与偏导 极值和最值 局部范围的最值 局部范围内的最值,相当于函数的极值 离散数据的最值 多元函数的极值 fminunc [x, fval] fminunc(fun, x0)fun为代求极值的函数;x0为起始点,即从这个点开始寻找极值,…

华媒舍:明星祝福视频,为你送上最真挚的祝福!

引言:嗨,亲爱哒书友!在这样一个科谱详细介绍文中,我们将带你领略一份尤其的独家合辑——十部明星祝愿视频。这种视频汇聚了诸多明星为你送上的最真挚的祝福。让我们一起来探寻这种电影中蕴含的情绪和价值吧! 1.共享温暖…

​​Vitis HLS 学习笔记--添加 RTL 黑盒函数

目录 1. 简介 2. 用法详解 2.1 需要的文件 2.1.1 RTL 函数签名 2.1.2 黑盒 JSON 描述文件 2.1.3 RTL IP 文件 2.2 操作步骤 3. 总结 1. 简介 Vitis HLS 工具可以将现有的 Verilog RTL IP(即硬件描述语言编写的模块)集成到 C/C HLS 项目中。通过…

【AI实践】Dify调用本地和在线模型服务

背景 Ollama可以本地部署模型,如何集成私有数据、如何外部应用程序对接,因此需要有一个应用开发框架 Dify功能介绍 欢迎使用 Dify | 中文 | Dify 下文将把dify部署在PC上,windows环境; 安装部署 安装dify及docker jacobJacobs…