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

axios的基本特性用法

news 2026/4/24 19:22:37

1. axios的基本特性

axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征：

支持浏览器和node.js
支持promiseAPI
自动转换JSON数据
能拦截请求和响应请求
转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密）

2. axios的基本用法

//客户端请求
axios.get('http://localhost:3000/adata').then(ret =>{//data属性名称是固定的，用于获取后台响应的数据console.log(ret.data)})
//服务器端响应
app.get('/adata', (req, res) => {res.send('Hello axios!')
})

服务器端响应的是ret对象
data属性是我们需要的数据，获取方法：ret.data(对象.属性名)

3. axios的常用API

get：查询数据
post：添加数据
put：修改数据
delete：删除数据

4. axios的参数传递🔥

4.1 get传递参数

第一种方式

通过URL传递参数

1. 传统url地址通过?传参

//客户端请求
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//axios get传统url地址请求传参axios.get('http://localhost:3000/axios?id=123').then(function (ret) {console.log(ret.data)})</script>
</body>
//服务器响应
app.get('/axios', (req, res) => {res.send('axios get 传递参数' + req.query.id)
})

2. 通过restful形式的url（用params接收参数）

//客户端请求
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//axios getrestful形式的url请求传参axios.get('http://localhost:3000/axios/456').then(function(ret){console.log(ret.data)})</script>
</body>
//服务器响应
app.get('/axios/:id', (req, res) => {res.send('axios get (Restful) 传递参数' + req.params.id)
})

第二种方式

通过params选项传递参数（比较方便，传递多个参数的时候）

//客户端请求
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//axios get通过params选项传递参数axios.get('http://localhost:3000/axios', {params: {id: 789}}).then(function (ret) {console.log(ret.data)})</script>
</body>
//服务器响应
app.get('/axios', (req, res) => {res.send('axios get 传递参数' + req.query.id)
})

4.2 delete传递参数

参数传递方式和get相似（两种）

通过url地址传参
- 传统url地址通过？传参
- restful形式的url（用params接收参数）
通过params（用query接收参数）

4.3 post传递参数

第一种方式

通过选项传递参数（默认传递的是json格式的数据）

//客户端请求
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//axios post传递参数axios.post('http://localhost:3000/axios', {uname: 'xuhui那束光',pwd: 123}).then(function (ret) {console.log(ret.data)})</script>
</body>
//服务器响应
app.post('/axios', (req, res) => {res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})

提交的数据格式是JSON形式，需要服务器端提供JSON支持🔥

//服务器端支持
app.use(bodyParser.json());

第二种方式

通过URLsearchParams传递参数（application/x-www-for,-urlencoded）

//客户端请求
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//axios post传递参数var params = new URLSearchParams();params.append('uname', 'xuhui那束光');params.append('pwd', '5555');axios.post('http://localhost:3000/axios', params).then(function(ret){console.log(ret.data)})</script>
</body>
//服务器响应
app.post('/axios/:id', (req, res) => {res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

提交的数据格式为字符串形式

4.4 put传递参数

参数传递方式与post相似（选项传参和URLsearchParams传参）

//客户端请求
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//axios put 请求传参axios.put('http://localhost:3000/axios/123', {uname: 'xuhui那束光',pwd: 123}).then(function (ret) {console.log(ret.data)})</script>
</body>
//服务器响应
app.put('/axios/:id', (req, res) => {res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

5.axios的响应结果

响应结果的主要属性：

data：实际响应回来的数据
headers：响应头信息
status：响应状态码
statusText：响应状态信息

axios.get('http://localhost:3000/axios').then(function (ret) {console.log(ret)
})

data绝大多数场景返回来的是JSON形式的数据🔥

//向服务器请求JSON接口
axios.get('http://localhost:3000/axios-json').then(function (ret) {console.log(ret.data.uname)
})
//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {res.json({uname: 'xuhui',age: 12});
})

data是大对象ret里面的小对象🔥

通过对象.属性名(data.uname) 可以获取对应的值

6. axios的全局配置

在发送请求前，可以做一些配置信息

axios.defaults.timeout = 3000；//响应超时时间
axios.defaults.baseURL = 'http://localhost:3000/app'；//默认地址
axios.defaults.headers[ ' mytoken' ] = 'aqwerarwrqrwqr' //设置请求头

1. 默认地址演示🔥

// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
//向服务器请求JSON接口
axios.get('axios-json').then(function (ret) {console.log(ret.data.uname)
})//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {res.json({uname: 'xuhui',age: 12});
})

2. 设置请求头

// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
//向服务器请求JSON接口
axios.get('axios-json').then(function (ret) {console.log(ret.data.uname)
})//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {res.json({uname: 'xuhui',age: 12});
})

对于跨域请求来说，请求头是需要后台进行配置的

7. axios拦截器

1.请求拦截器🔥

在请求发出之前设置一些信息

//axios请求拦截器
axios.interceptors.request.use(function(config) {console.log(config.url)config.headers.mytoken = 'nihao';return config;
}, function(err){console.log(err)
})
//向服务器发起请求
axios.get('http://localhost:3000/adata').then(function(data){console.log(data)
})

2.响应拦截器🔥

在获取数据之前对数据做一些加工处理

//axios响应拦截器
axios.interceptors.response.use(function(res) {console.log(res)return res;
}, function(err){console.log(err)
})
//向服务器发起请求
axios.get('http://localhost:3000/adata').then(function (data) {console.log(data)
})

（25行拦截器打印的信息 res）和（31行最终需要的数据）打印的信息是完全一样的。
但是，响应拦截器res中拿到的不是具体数据

在调用接口时，只关心实际的数据，不需要包装数据的对象，可以在设置拦截器内容，对接收到的数据进行处理加工🔥

最后拿到的data是经过响应拦截器处理后的数据
注：文中部分内容来源于网络，联系侵删

axios的基本特性用法

1. axios的基本特性 axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征： 支持浏览器和node.js支持promiseAPI自动转换JSON数据能拦截请求和响应请求转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密&…...

编程日记 2024/2/27 22:16:07

打印水仙花数---c语言刷题

欢迎关注个人主页：逸狼创造不易，可以点点赞吗~ 如有错误，欢迎指出~ 题述求出0～100000之间的所有“水仙花数”并输出。 “水仙花数”是指一个n位数，其各位数字的n次方之和确好等于该数本身，如:153&#…...

编程日记 2024/2/27 22:12:03

springboot基础(82):分布式定时任务解决方案shedlock

文章目录前言简介shedlock dbSchedulerLock注解说明 shedlock redis遇到的问题1.配置shedlock不生效2.报错net/javacrumbs/shedlock/core/LockProvider shedlock升级高版本同名定时任务前言多节点或者多服务器拥有相同的定时任务，这种情况下，不同节…...

编程日记 2024/2/27 22:07:58

【Golang】Gorm乐观锁optimisticlock的使用

在数据库操作中，为了保证数据的一致性和完整性，常常需要采取一些措施来防止并发操作导致的数据冲突。悲观锁和乐观锁是两种常见的并发控制机制。悲观锁（Pessimistic Lock） 悲观锁的基本假设是，数据在并发访问时很可能…...

编程日记 2024/2/27 22:05:56

Apache Doris 发展历程、技术特性及云原生时代的未来规划

本文节选自《基础软件之路：企业级实践及开源之路》一书，该书集结了中国几乎所有主流基础软件企业的实践案例，由 28 位知名专家共同编写，系统剖析了基础软件发展趋势、四大基础软件（数据库、操作系统、编程语言与中间件…...

编程日记 2024/2/27 22:04:55

2024-02-26（Spark，kafka）

1.Spark SQL是Spark的一个模块，用于处理海量结构化数据限定：结构化数据处理 RDD的数据开发中，结构化，非结构化，半结构化数据都能处理。 2.为什么要学习SparkSQL SparkSQL是非常成熟的海量结构化数据处理框架。学…...

编程日记 2024/2/27 22:03:54

RubyMine 2023：让Ruby编程变得更简单 mac/win版

JetBrains RubyMine 2023是一款专为Ruby开发者打造的强大集成开发环境（IDE）。这款工具集成了许多先进的功能，旨在提高Ruby编程的效率和生产力。 RubyMine 2023软件获取 RubyMine 2023的智能代码编辑器提供了丰富的代码补全和提示功能&#…...

编程日记 2024/2/27 22:02:53

低功耗设计——门控时钟

1. 前言芯片功耗组成中，有高达40%甚至更多是由时钟树消耗掉的。这个结果的原因也很直观，因为这些时钟树在系统中具有最高的切换频率，而且有很多时钟buffer，而且为了最小化时钟延时，它们通常具有很高的驱动强度。此外&…...

编程日记 2024/2/27 22:00:51

《凤凰架构》-本地事务章节读书笔记

1、写锁又名排它锁，写锁禁止其他事务施加读锁和写锁，而不禁止其他事务读取数据（如果遇到了个不加任何锁的另一个事务2，写锁是无法阻止事务2读取数据的），这就是读未提交隔离级别中的脏读问题产生的根因。 2…...

编程日记 2024/2/27 21:58:49

ruby对比python，30分钟教程

会python还需要搞会ruby吗？ web方面：ruby有rails，python有flask,django，rails远超django Ruby，一种简单快捷的面向对象（面向对象程序设计）脚本语言，在20世纪90年代由日本人松本行弘…...

编程日记 2024/2/27 21:56:47

C语言——oj刷题——判断闰年

当我们谈到判断闰年时，我们通常会遵循以下规则：闰年是指能被4整除但不能被100整除的年份，或者能被400整除的年份。在C语言中，我们可以通过编写一个简单的程序来实现这一功能。下面是一个示例代码，用于判断一个给定年份…...

编程日记 2024/2/27 21:53:44

Git笔记——3

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、合并模式和分支策略二、bug分支三、强制删除分支四、创建远程仓库五、克隆远程仓库_HTTPS和_SSH 克隆远程仓库_HTTPS 克隆远程仓库_SSH 六、向远程仓库…...

编程日记 2024/2/27 21:52:43

C++面试 -操作系统-安全能力：死锁的危害、出现原因、解决方法

目录死锁的危害死锁出现的原因死锁的解决方法死锁是计算机科学中一个非常重要的概念，特别是在多线程、并发编程以及数据库管理系统等领域中。下面是关于死锁的危害、出现原因和解决方法的基础概述： 死锁的危害资源浪费：死锁导致系统…...

编程日记 2024/2/27 21:50:40

台湾香港澳门媒体宣发稿报道有哪些平台资源，跨境出海推广新闻营销公司告诉你

【本篇由言同数字科技有限公司原创】随着全球化的快速发展和互联网的普及，品牌越来越重视海外市场的开拓。作为亚洲地区的重要经济中心，香港、台湾和澳门不仅具有独特的地理位置和文化背景，还拥有丰富的媒体资源。在本文中，我们将…...

编程日记 2024/2/27 21:49:39

Python分支和循环结构及其应用（文末送书）

一、分支结构应用场景我们写的Python代码都是一条一条语句顺序执行，这种代码结构通常称之为顺序结构。然而仅有顺序结构并不能解决所有的问题。 if语句的使用在Python中，要构造分支结构可以使用if、elif和else关键字。所谓关键字就是有特殊含义的…...

编程日记 2024/2/27 21:42:33

机器学习——线性代数中矩阵和向量的基本介绍

矩阵和向量的基本概念矩阵的基本概念（这里不多说，应该都知道） 而向量就是一个特殊的矩阵，即向量只有一列，是个n*1的矩阵注：一般矩阵用大写字母表示，向量用小写字母表示矩阵的加减运算两个…...

编程日记 2024/2/27 21:38:29

基于R语言的Meta分析【全流程、不确定性分析】方法与Meta机器学习技术应用

Meta分析是针对某一科研问题，根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法，对来源不同的研究成果进行收集、合并及定量统计分析的方法，最早出现于“循证医学”，现已广泛应用于农林生态，资源环境等方面。…...

编程日记 2024/2/27 21:37:28

蜘蛛蜂优化算法SWO求解不闭合MD-MTSP，可以修改旅行商个数及起点（提供MATLAB代码）

1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法（Spider wasp optimizer，SWO）由Mohamed Abdel-Basset等人于2023年提出，该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为，具有搜索速度快，求解精度高的优势。VRPTW&#x…...

编程日记 2024/2/27 21:34:25

Java架构师之路六、高并发与性能优化：高并发编程、性能调优、线程池、NIO、Netty、高性能数据库等。

目录高并发编程： 性能调优： 线程池： NIO： Netty： 高性能数据库： 上篇：Java架构师之路五、微服务：微服务架构、服务注册与发现、服务治理、服务监控、容器化等。-CSDN博客下篇…...

编程日记 2024/2/27 21:30:21

1. 行转列 1.1 示例数据准备 create table test_9(id int,name varchar(22),course varchar(22),score decimal(18,2) ); insert into test_9 (id,name,course,score)values(1,小王,java,99); insert into test_9 (id,name,course,score)values(2,小张,java,89.2); inse…...

编程日记 2024/2/27 21:29:20

告别虚拟机！用WSL2 + VSCode在Windows上打造丝滑的C++开发环境（保姆级配置）

告别虚拟机！用WSL2 VSCode在Windows上打造丝滑的C开发环境还在忍受虚拟机卡顿、资源占用高的折磨？Windows开发者终于迎来了终极解决方案——WSL2与VSCode的黄金组合。这不仅是技术栈的升级，更是开发体验的革命。想象一下：在Wind…...

编程新知 2026/4/24 19:13:46

为什么92%的开发者VSCode大模型配置失败？——资深架构师曝光4个隐藏配置断点

更多请点击： https://intelliparadigm.com 第一章：为什么92%的开发者VSCode大模型配置失败？ VSCode 作为当前最主流的开发编辑器，其大模型插件（如 GitHub Copilot、Tabnine、CodeWhisperer 及本地 LLM 接入方案&#…...

编程新知 2026/4/24 19:03:19

3步掌握GPX Studio：开源在线GPX编辑器的终极指南

3步掌握GPX Studio：开源在线GPX编辑器的终极指南【免费下载链接】gpxstudio.github.io The online GPX file editor 项目地址: https://gitcode.com/gh_mirrors/gp/gpxstudio.github.io 在户外运动、骑行导航和GPS轨迹处理的世界里，GPX文件是你探…...

编程新知 2026/4/24 17:47:54

Python时间序列分析：趋势提取方法与实战技巧

1. 时间序列数据中的趋势成分解析时间序列分析中，趋势（Trend）是指数据在长期表现出的持续上升或下降的运动方向。这种趋势可能由多种因素引起，比如经济周期、技术改进或季节性因素。在Python数据分析中，我们经常需要先…...

编程新知 2026/4/24 17:41:21

DolphinScheduler告警配置全解析：除了邮件钉钉，这些高级告警策略你试过吗？

DolphinScheduler告警配置全解析：除了邮件钉钉，这些高级告警策略你试过吗？ 当你的数据流水线在深夜突然崩溃，而值班人员却因为告警信息淹没在群聊中未能及时响应——这种场景对每个数据工程师来说都是噩梦。DolphinScheduler作为企…...

编程新知 2026/4/24 17:29:46

笔记本维修店不会告诉你的秘密：ThinkPad安全芯片短接法原理与风险全解析（附T系列实操）

ThinkPad安全芯片密码破解机制深度解析：从I2C总线原理到实战避坑指南 ThinkPad笔记本在企业级市场长期占据主导地位，其硬件级安全设计一直是业界标杆。但鲜为人知的是，某些特定型号的安全芯片存在通过物理短接清除密码的"后门"。这…...

编程新知 2026/4/24 17:12:32

MathTranslate揭秘：如何用智能算法完美翻译LaTeX数学论文

MathTranslate揭秘：如何用智能算法完美翻译LaTeX数学论文【免费下载链接】MathTranslate translate scientific papers in latex, especially arxiv papers 项目地址: https://gitcode.com/gh_mirrors/ma/MathTranslate 在科研领域，语言障碍常常…...

编程新知 2026/4/24 16:53:47