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

axios的基本特性用法

news 2026/2/9 19:38:41
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

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2026/1/22 14:22:27

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/11/14 9:31:35

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/8 22:07:52

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2026/1/31 4:37:53

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/11/7 10:02:17

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54

AxureRP-Pro-Beta-Setup_114413.exe （6.0.0.2887）

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

编程新知 2026/2/4 19:42:20

归并排序：分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

编程新知 2026/1/27 17:06:38