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

axios的基本特性用法

news 2026/1/27 18:41:03
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)
})
  1. （25行拦截器打印的信息 res）和 （31行最终需要的数据 ） 打印的信息是完全一样的。
  2. 但是，响应拦截器res中拿到的不是具体数据
  • 在调用接口时，只关心实际的数据，不需要包装数据的对象，可以在设置拦截器内容，对接收到的数据进行处理加工🔥
  • 最后拿到的data是经过响应拦截器处理后的数据
  • 注：文中部分内容来源于网络，联系侵删

相关文章：

axios的基本特性用法

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

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

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

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

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

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

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

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

【Golang】Gorm乐观锁optimisticlock的使用

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

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

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

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

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

2024-02-26（Spark，kafka）

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

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

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

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

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

低功耗设计——门控时钟

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

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

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

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

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

ruby对比python，30分钟教程

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

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

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

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

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

Git笔记——3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MySQL-行转列，链接查询

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/1/25 3:32:27

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/12/14 13:11:33

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47