当前位置：首页 > news >正文

axios

news 来源：原创 2025/5/15 13:52:58

文章目录

@[TOC](文章目录)

一、axios的基本使用
axios请求
1、引用axios,并发送请求
axios发送请求的简化写法
2、接受响应数据，并对响应的数据进行处理

三、axios拦截器（instance）
1、请求拦截
2、响应拦截

axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别

一、axios的基本使用

axios：是基于ajax封装的一个对象，相对于ajax来说axios有更加强大的API以及更加简化的请求方式。
axios的作用：
1：发送请求
2：处理响应数据
3：响应、请求的拦截
4：取消请求

axios请求

在使用axios之前因为它是第三方库，所以需要进行npm i axios(下载)，之后才可以进行使用这里就不演示了。

1、引用axios,并发送请求

//引用axios，注意这里的导入数默认暴露的方式，而统一暴露的方式是使用{...}import axios from "axios";
/*** 发送请求* axios({设置请求的参数})  请求要素：1、url:...,2、methods:请求方式,3、请求参数* 注意：axios请求完之后返回值的类型是promise类型* @type {Promise<AxiosResponse<any>> | *}*/let promised = axios({url:"http://forum.atguigu.cn/api/rand.qinghua",//设置请求类型method:"post",//此属性是设置url参数的所以一般都是和get请求搭配使用,但是也是可以与post请求中创建//此对象都是以键值对方式将数据放入urlparams:{format:'jsond',},//此对象是将里面的数据放入到请求体当中，一般与post请求搭配使用data:{name:'zhangshan',format:'dataformat'}})

axios发送请求的简化写法

  import axios from "axios";//post(url: string, data?: D, config?: axios.AxiosRequestConfig<D>): Promise<R>;let promised = exios.post("http://forum.atguigu.cn/api/rand.qinghua?format=jsond",{name:"zhangshan", format:"jsond"})

此时就向网址http://forum.atguigu.cn/api/rand.qinghua发送了一个post请求，并且请求体中有name参数和format参数，url参数有format

2、接受响应数据，并对响应的数据进行处理

//获取响应的数据，then响应的状态为result，catch的执行的是响应状态为reject
promised.then(//response为响应数据对象,有：/*** data:   服务端响应回来恶的数据* status 响应状态码* statusText:状态码的描述  列如：ok* headers：本次响应的所有响应头* config：本次请求的配置信息* request: 本次请求发送时锁使用的XMLHttpRequest对象* 例如：*      config:{transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}*      data:{code: 1, content: '“你可以笑一个吗?”“为什么啊?”“因为我的咖啡忘加糖了。”'}*      headers:AxiosHeaders {content-type: 'application/json'}*      request :XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}*      status: 200*      statusText: ""*/(response)=>{console.log(response)}).catch(/*** 此方法是当请求或响应有错误就会执行此方法* @param err 此对象是用来接收报错的详细信息*/err=>{console.log(err);})

三、axios拦截器（instance）

1、请求拦截

//拦截器
import axios from "axios";//使用axios创建一可以发起请求的实例对象
const instance = axios.create({//设置统一请求网址的前缀baseURL:"http://forum.atguigu.cn/",//设置请求的超时时间（单位：毫秒）timeout:10000})//请求拦截器
instance.interceptors.request.use(/***设置请求的基本信息* @param config    配置参数对象* @returns {*}     返回修改之后的配置对象*/config=>{console.log("请求拦截器",config);//设置请求头中的属性config.headers.Accept="application/json, text/html, */*";//将设置好的config参数返回，不然无效，且会直接报错，（注意这里不管有没有设置config，都必须要return不然会报错）return config},/***请求失败是就会执行此方法* @param error*/error=>{console.error('请求方法错误：', error.message);//返回一个失败的promise对象return Promise.reject(error);}
)

2、响应拦截


//响应拦截器
instance.interceptors.response.use(/***  响应状态码为2xx时执行此方法* @param response  响应的信息* @returns {*}*/(response)=>{console.log("response success:",response);//最后需要返回的对象return response},/***  当响应有误时执行此方法(错误的判定方式为状态码!=2xx)* @param error 报错的详细信息* @returns {Promise<never>}*/(error)=>{console.log("something wrong:",error);//最后返回的定义promise对象return Promise.reject(error);}
)export default instance;

在这里插入图片描述

资料来源：尚硅谷javaweb

axios拦截器、vue中的路由守卫、servlet中的过滤器、spring的拦截器的区别

层面不同：Axios 拦截器和 Vue 路由守卫作用于前端，分别针对 HTTP 请求和路由导航；Servlet 过滤器和 Spring拦截器作用于后端，Servlet 过滤器基于 Servlet 容器，Spring 拦截器基于 Spring 框架。
粒度不同：Servlet过滤器作用范围更广，针对整个 Web 应用的 HTTP 请求；Spring 拦截器主要针对 Spring MVC框架内的请求处理；Axios 拦截器仅针对 Axios 发起的请求；Vue 路由守卫仅在 Vue 应用的路由导航过程中生效。

axios

文章目录 [TOC](文章目录) 一、axios的基本使用axios请求1、引用axios,并发送请求axios发送请求的简化写法2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance）1、请求拦截2、响应拦截 axios拦截器、vue中的路由守卫、servlet…...

编程日记 2025/5/15 13:52:58

MacOS下TestHubo安装配置指南

TestHubo是一款开源免费的测试管理工具， 下面介绍MacOS私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业，支持在本地或专属服务器上运行，以实现对数据和系统的完全控制。 1、Mac 服务端安装 Mac安装包下载地址&a…...

编程日记 2025/5/15 7:55:03

vue2/3,Spring Boot以及生产环境跨域解决方案

vue2和vue3跨域解决方案 Vue 2 (基于 Webpack) 的跨域解决方案 1. 创建或编辑 vue.config.js 文件 Vue CLI为Webpack项目提供了简单的代理配置方式。你可以通过创建或编辑项目的根目录下的 vue.config.js 文件来设置开发服务器的代理规则： // vue.config.js mod…...

编程日记 2025/5/12 14:50:03

TestMAX/DFT Compiler：时序单元的类型、连接顺序和后DFT优化

相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后，Design Compiler内置的HDL Compiler工…...

编程日记 2025/5/6 20:02:12

Elasticsearch：analyzer（分析器）

一、概述可用于将字符串字段转换为单独的术语： 添加到倒排索引中，以便文档可搜索。级查询（如生成搜索词的 match查询）使用。分析器分为内置分析器和自定义的分析器，它们都是由若干个字符过滤器（chara…...

编程日记 2025/5/13 15:04:28

蓝桥杯——异或森林

问题描述在一个神秘的世界中，存在着一个称为"异或森林"的地方。异或森林中的每个树木都拥有独特的力量。肖恩进入了这片森林，他得到了一个任务：找出数组中满足条件的连续子数组，使得连续子数组中所有元素异或运算结果…...

编程日记 2025/5/15 14:23:32

第一个C++程序 - Hello World, 编译与运行

引言编写并运行你的第一个 C 程序是学习这门语言的第一步。通过这个简单的例子，你将了解如何创建、编译和运行一个基本的 C 程序。本文将详细介绍每个步骤，并确保初学者能够顺利上手。一、编写 "Hello World" 程序 1. 创建源代码文件首先…...

编程日记 2025/5/11 8:33:28

学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.PerspectiveCamera透…...

编程日记 2025/5/12 15:16:21

测试 - 4 （ 9000 字详解）

一：性能测试 1.1 什么是性能测试性能测试和功能测试虽然都在系统测试阶段进行，但两者有本质区别。功能测试主要关注系统“能否完成特定功能”，例如一辆车是否具备四个轮子、方向盘、挡风玻璃，以及是否能够正常行驶。而性能测试…...

编程日记 2025/5/11 12:23:02

从 Coding (Jenkinsfile) 到 Docker：全流程自动化部署 Spring Boot 实战指南（简化篇）

前言本文记录使用 Coding (以 Jenkinsfile 为核心) 和 Docker 部署 Springboot 项目的过程，分享设置细节和一些注意问题。 1. 配置服务器环境在实施此过程前，确保服务器已配置好 Docker、MySQL 和 Redis，可参考下列链接进行操作&#xff1…...

编程日记 2025/5/15 0:47:26

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点结论及未来工作-Conclusions and future work研究总结未来研究方…...

编程日记 2025/5/15 14:27:07

WebGPU入门初识

什么是 WebGPU？ WebGPU 是一种现代图形 API，旨在取代 WebGL，提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12，为 Web 开发者带来了类似于原生图形 API 的性能和控制力。与 WebGL 不同，Web…...

编程日记 2025/5/14 17:13:06

Go语言基础语法

文章目录 Go语言基础语法一、引言二、基础语法1、变量声明与作用域1.1、全局变量1.2、局部变量1.3、块作用域 2、基本数据类型3、控制流程3.1、条件语句3.2、循环语句 4、函数5、并发编程三、使用示例四、并发编程示例五、变量作用域详解六、总结 Go语言基础语法一、引言 G…...

编程日记 2025/5/15 1:05:33

易基因： BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性｜Exp Mol Med

大家好，这里是专注表观组学十余年，领跑多组学科研服务的易基因。肝细胞癌（hepatocellular carcinoma，HCC）早期复发仍然是一个具有挑战性的领域，其中涉及的机制尚未完全被理解。尽管微血管侵犯&#xff08…...

编程日记 2025/5/15 8:03:16

layui动态拼接生成下拉框验证必填项失效问题

利用 jQuery 动态拼接下拉框时，lay-verify"required" 失效了，有以下几种原因。 1. <form></form>标签加入 layui 类，class"layui-form" 。提交按钮上加自动提交，lay-submit ""; 。需…...

编程日记 2025/5/13 21:16:24

Speckly：基于Speckle文档的RAG智能问答机器人

前言 Speckly 是一个基于检索增强生成 (RAG) 技术的智能问答机器人，它能像一位经验丰富的工程师，理解你的问题，并从 Speckle 文档中精准地找到答案。更厉害的是，它甚至可以帮你生成代码片段！🚀 本文将详…...

编程日记 2025/5/15 14:33:45

NodeRed使用心得，实现增删改查等

使用场景介绍在VUE中使用nodeRed实现对节点的增删改查等功能，且储存成功之后下点击时启动对应流程安装与配置 1.安装NodeRed npm install -g --unsafe-perm node-red 安装完成后，你可以通过运行以下命令来启动Node-RED node-red-start2. 配置文件 N…...

编程日记 2025/5/15 14:36:17

万物皆有解法（序）

万物皆有解法（序） 《万物有解》一：解的存在解：可做解释解答，此文引申为原因。可做解除、解围，此文引申为解法、方法。先有事物存于世-what，再有原因为何存-why，再有解法如何除去…...

编程日记 2025/5/4 15:15:02

OpenCV相机标定与3D重建(37)计算两幅图像之间单应性矩阵（Homography Matrix）的函数findHomography()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述找到两个平面之间的透视变换。 cv::findHomography 是 OpenCV 库中用于计算两幅图像之间单应性矩阵（Homography Matrix）的…...

编程日记 2025/5/15 14:40:17

从虚拟到现实：AI与AR/VR技术如何改变体验经济？

引言：体验经济的崛起在当今消费环境中，产品与服务早已不再是市场竞争的唯一焦点，能够提供深刻感知和独特体验的品牌，往往更能赢得消费者的青睐。这种转变标志着体验经济的崛起。体验经济不仅仅是简单的买卖行为，而是通…...

编程日记 2025/5/15 0:12:35

Linux系统之stat命令的基本使用

Linux系统之stat命令的基本使用一、stat命令介绍二、stat命令帮助2.1 查询帮助信息2.2 stat命令的帮助解释三、stat命令的基本使用3.1 查询文件信息3.2 查看文件系统状态3.3 使用格式化输出3.4 以简洁形式打印信息四、注意事项一、stat命令介绍 stat 命令用于显示文件或文…...

编程日记 2025/5/10 2:03:50

c++ 命名空间

目录目录目录 namespace的定义代码演示先使用全局域，再使用namespace定义出的域命名空间中可以定义变量/函数/类型等命名空间可以嵌套 namespace的使用指定命名空间访问 using将命名空间中某个成员展开展开命名空间中全部成员在c中，由…...

编程日记 2025/5/15 14:39:41

【实验记录】动手实现一个简单的神经网络实验（一）

最近上了“神经网络与深度学习”这门课，有一个自己动手实现调整神经网络模型的实验感觉还挺有记录意义，可以帮我巩固之前学习到的理论知识，所以就打算记录一下。实验大概是使用LeNet（卷积神经网络）对MINIST数据集做图…...

编程日记 2025/5/14 20:38:56

【2024年最新】BilibiliB站视频动态评论爬虫

废话不多说，直接先放git仓库：GitHub - linyuye/Bilibili_crawler: bilibili爬虫，基于selenium获取oid与cookie，request获取api内容〇：概念简述 oid：视频/动态的uuid，b站对于发布内容的通用唯…...

编程日记 2025/5/15 2:22:29

清空DNS 缓存

如果遇到修改了host文件，但是IP和域名的映射有问题的情况，可以尝试刷新DNS缓存。 ipconfig/flushdns win建加R建，然后输入cmd，然后回车然后回车，或者点击确定按钮。出现如下所示标识清空DNS 缓存成功。...

编程日记 2025/5/3 9:04:43

东土智能交通服务器助力北京市车路云一体化建设

背景及意义北京高级别自动驾驶示范区自2020年启动建设，至今已经发展建设到3.0阶段，通州区作为3.0阶段扩建的重点区域之一，扩区建设范围共计约175平方公里，涉及18个属地街镇，涵盖580个路口。作为北京市车路云一体化…...

编程日记 2025/5/15 12:47:44

HarmonyOS NEXT 实战之元服务：静态案例效果---妙语集语

背景： 前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考先上本期效果图 ，里面图片自行替换效果图1完整代码案例如下： import { authentication } …...

编程日记 2025/5/10 15:44:15

python基础项目

1.联系人案例 # 导入的模块 from input_util import * import re import csv# 定义一个变量保存文件读取的信息 users {}# 封装读取文件的函数 def reader_file(path_name: str ./python基础/2024-11-15python基础项目/data/a.csv) -> None:try:with open(path_name, enco…...

编程日记 2025/5/14 13:50:47

mysql返回N/A

在写统计图的接口，sql查询一直无数据，给的默认值也没有实现： SELECTifnull( unit.num, 0 ) riskUnitCount,ifnull( EVENT.num, 0 ) riskEventCount,ifnull( measure.num, 0 ) riskMeasureCount FROMtb_companyLEFT JOIN (SELECTrisk.qyid,co…...

编程日记 2025/5/14 11:36:10

C++---------迭代策略与迭代器

一、迭代策略与迭代器迭代器的概念迭代器是一种对象，它提供了一种统一的方式来访问容器（如数组、向量、列表等）中的元素，而不暴露容器的内部结构。迭代器的行为类似于指针，可以用于遍历容器中的元素、修改元素以及…...

编程日记 2025/5/14 1:56:31

深入解析 Oracle 的聚合函数 ROLLUP

目录深入解析 Oracle 的聚合函数 ROLLUP一、ROLLUP 函数概述二、ROLLUP 函数语法三、ROLLUP 实例详解（一）基础分组聚合（二）引入 ROLLUP 函数（三）ROLLUP 与 NULL 值（四）多列复杂分组…...

编程日记 2025/5/14 21:15:35

kipotix4靶机实战

信息收集 1.判断靶机ip 原理：开靶机之前nmap扫一次网段，再开靶机之后扫一次，查看多出来的ip就是靶机ip ip192.168.98.1742.判断端口服务，系统版本 a.确定端口 b.-p指定端口进一步收集 c.信息筛选 1.端口：22,80,139,…...

编程日记 2025/5/12 18:00:18

Java中处理if-else的几种高级方法

前言在我看来多写几个if-else没啥大不了的，但是就是看起来没啥逼格，领导嫌弃。我根据开发的经历写几个不同的替代方法一、枚举法替代我先前写了一篇文章，可以去看看。通过枚举替换if-else语句的解决方案_枚举代替if else c语言-CSDN博…...

编程日记 2025/5/14 23:25:41

LaTeX 是一种基于标记的排版系统，广泛用于创建高质量的文档，特别是在需要复杂数学公式、表格、文献引用等的场景中

LaTeX 是一种基于标记的排版系统，广泛用于创建高质量的文档，特别是在需要复杂数学公式、表格、文献引用等的场景中。以下是关于 LaTeX 的详细解释： 1. LaTeX 的基本概念本质：LaTeX 是基于 TeX 的排版系统，提供了更高…...

编程日记 2025/5/14 17:27:17

Go入门篇：（一）golang的安装和编辑工具安装

一、前言最近我有幸接触到Go语言，深入了解后，发现go语言确实有很多让人惊叹的地方。作为一个有着多年Java编程经验的程序员，我深深地被它所吸引，并且决定记录下我的学习之路，以便与大家分享我的经验和感悟。与Java不同，Go语言的语法和运行效率都非常高，特别是对于并…...

编程日记 2025/5/14 10:57:25

【10】Selenium+Python UI自动化测试邮件发送测试报告（某积载系统实例-04）

测试报告需要发送给相关人员，但每次都要在report目录下去复制太麻烦，可以使用邮件模块自动将生成的报告发送给相关人员 1、新增utils文件夹，用于存放工具文件在utils下新增sendmail.py文件代码 sendmail.py import smtplib from email.…...

编程日记 2025/5/12 0:10:18

Playwright爬虫xpath获取技巧

示例一 <button class"MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton…...

编程日记 2025/5/12 21:21:44

运算符 - 算术、关系、逻辑运算符

引言在编程中，运算符是用于执行特定操作的符号。C 提供了多种类型的运算符，包括算术运算符、关系运算符和逻辑运算符等。理解这些运算符及其用法对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的这三种基本运算符，并通过实例帮助读…...

编程日记 2025/5/13 23:48:04

中关村科金外呼机器人智能沟通破解营销难题

当今，传统的营销方式在效率、成本控制、客户管理等方面逐渐显现出局限性，难以满足现代企业的需求。如何提升营销效率、降低运营成本、有效管理客户会员，成为企业的难题。中关村科金外呼机器人通过智能化沟通技术，为企业提供了一站…...

编程日记 2025/5/13 17:47:22

css绘制圆并绘制圆的半径

<div class"item1"></div>.item1 {position: relative;width: 420px;height: 420px;border-radius: 50%; /* 圆形 */color: white; /* 文本颜色 */background-color: rgba(154, 227, 36, 0.4); } .item1::before {content: "";position: absol…...

编程日记 2025/5/12 4:36:28

实现类似gpt 打字效果

1. css的动画（animation) css中实现动画有两种方式：transition过渡动画、 animation自定义动画。具体的可以看MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 使用keyframes自定义关键帧动画并未其命名使用自定义动…...

编程日记 2025/5/14 13:49:38

【乐企文件生成工程】根据特定要素动态选择需要生成的发票板式文件实现

乐企版式文件生成工程，涉及到多个票种，不乏特殊票种的生成，如果每个特殊票种都单独写逻辑，那整个代码写起来体量就不得了，如何实现代码逻辑的同时也更优雅的实现代码扩展性呢，您接着往下看。使用设计模式工厂模式 1、定义接口InvoiceFileService public interface Inv…...

编程日记 2025/5/11 21:10:02

near-synonym反义词生成(2)：Prompt +Bert-MLM(FT)

near-synonym之反义词生成方法二 near-synonym, 中文反义词/近义词/同义词(antonym/synonym)工具包. 方法一为(neg_antonym): Word2vec -> ANN -> NLI -> Length 方法二为(mlm_antonym): Prompt Bert-MLM(FT) Beam-Search 项目地址 github: https://github.com/yon…...

编程日记 2025/5/14 5:53:38

dockfile 配置 /etc/apt/source.list.d/debian.list 清华镜像

docker:3.12.7 镜像使用的是 debian 系统，比 ubuntu 更轻量。debian 系统内，apt 镜像源列表位于 /etc/apt/source.list.d/debian.list（作为对比，ubuntu 的镜像列表位于 /etc/apt/source.list，二者语法相同）…...

编程日记 2025/5/13 23:10:26

DAY38|动态规划Part06|LeetCode:322. 零钱兑换、279.完全平方数、139.单词拆分

目录 LeetCode:322. 零钱兑换基本思路 C代码 LeetCode:279.完全平方数 C代码 LeetCode:139.单词拆分基本思路 C代码 LeetCode:322. 零钱兑换力扣题目链接文字讲解：LeetCode:322. 零钱兑换视频讲解：动态规划之完全背包，装满背包最…...

编程日记 2025/5/10 1:37:55

Spring事务回滚

Transactional注解 Transactional作用：就是在当前这个方法执行开始之前来开启事务，方法执行完毕之后提交事务。如果在这个方法执行的过程当中出现了异常，就会进行事务的回滚操作。 Transactional注解：我们一般会在业务层当中来控制…...

编程日记 2025/5/7 15:08:36

【目标跟踪】checkpoint文件到底是什么?

说实话，我一直决定计算机视觉是个很玄的东西，里面的很多东西都是看了概念之后云里雾里，今天就把我复现代码时遇到的不懂得讲一讲——checkpoint文件是个啥？ checkpoint文件顾名思义就是一个模型检查点文件，用于保存训练…...

编程日记 2025/5/10 8:03:54

hiprint结合vue2项目实现静默打印详细使用步骤

代码地址是：vue-plugin-hiprint: hiprint for Vue2/Vue3 ⚡打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑本地安装包地址：electron-hiprint 发行版 - Gitee.com 1、先安装hipint安装包在本地 2、项目运行npm（socket.…...

编程日记 2025/5/13 2:01:58