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

axios的基本特性用法

news 2026/4/22 12:24:42
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

别再死记硬背NFA转DFA的算法了！用Python手写一个转换器，理解更透彻

用Python实现NFA到DFA转换&#xff1a;从理论到代码的实战指南 第一次接触NFA转DFA算法时&#xff0c;我被那些抽象的状态集合和ε闭包概念弄得晕头转向。直到有一天&#xff0c;我决定用Python把这些理论变成可运行的代码&#xff0c;一切突然变得清晰起来。这篇文章将带你用不…...

编程新知 2026/4/22 12:02:04

从超时到成功：深度解析并解决Hugging Face模型下载中的HTTPSConnectionPool与LocalEntryNotFoundError

1. 当模型下载变成一场噩梦&#xff1a;HTTPSConnectionPool与LocalEntryNotFoundError的真相 最近在处理PDF文档时&#xff0c;我遇到了一个让人抓狂的问题。当时我正在使用unstructured库的partition_pdf功能&#xff0c;系统突然抛出一连串红色错误提示&#xff1a;先是HTTP…...

编程新知 2026/4/22 11:24:37

OpenCV主库与Contrib扩展版本匹配避坑指南：以Ubuntu 22.04 + OpenCV 4.5.5为例

OpenCV主库与Contrib扩展版本匹配避坑指南&#xff1a;以Ubuntu 22.04 OpenCV 4.5.5为例 在计算机视觉开发中&#xff0c;OpenCV无疑是最受欢迎的库之一。然而&#xff0c;许多开发者在尝试扩展OpenCV功能时&#xff0c;常常会遇到一个看似简单却令人头疼的问题&#xff1a;主…...

编程新知 2026/4/22 10:41:09

Python量化分析新利器：3分钟掌握Mootdx通达信数据读取

Python量化分析新利器&#xff1a;3分钟掌握Mootdx通达信数据读取 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx Mootdx是一个强大的Python开源库&#xff0c;专门用于读取通达信本地数据文件&am…...

编程新知 2026/4/22 10:25:18

（110页PPT）《战略的力量》从战略规划到执行落地的整体解决方案（附下载方式）

篇幅所限&#xff0c;本文只提供部分资料内容&#xff0c;完整资料请看下面链接 https://download.csdn.net/download/2501_92808811/92779095 资料解读&#xff1a;《战略的力量》从战略规划到执行落地的整体解决方案 详细资料请看本解读文章的最后内容 在 VUCA 时代&#…...

编程新知 2026/4/22 10:18:42

RK3588双系统实战：从分区表设计到fstab修改，手把手教你构建Android 12与Linux Debian共存环境

RK3588双系统深度实践&#xff1a;Android 12与Debian的精密共存架构设计 当工业级设备需要同时承载高性能图形交互与稳定后台服务时&#xff0c;RK3588的双系统架构展现出独特价值。想象一下&#xff0c;一台医疗影像终端既能运行Android的触控应用&#xff0c;又能通过Linux …...

编程新知 2026/4/22 10:08:01

IUV全网元协同排障实战：从无线侧到核心网的典型配置错点解析

1. 从"用户无法接入5G网络"说起&#xff1a;一个典型故障的排查起点 上周遇到个挺有意思的案例&#xff1a;某运营商新建的5G SA网络完成部署后&#xff0c;测试终端始终显示"无服务"状态。这个看似简单的现象背后&#xff0c;其实藏着从无线侧到核心网可能…...

编程新知 2026/4/22 9:33:25

OBS多平台同时推流：如何通过开源插件实现高效直播分发？

OBS多平台同时推流&#xff1a;如何通过开源插件实现高效直播分发&#xff1f; 【免费下载链接】obs-multi-rtmp OBS複数サイト同時配信プラグイン 项目地址: https://gitcode.com/gh_mirrors/ob/obs-multi-rtmp 你是否曾在多平台直播时陷入重复配置的困境&#xff1f;每…...

编程新知 2026/4/22 8:33:09

深度解析VMware Unlocker：突破macOS虚拟化限制的完整技术指南

深度解析VMware Unlocker&#xff1a;突破macOS虚拟化限制的完整技术指南 【免费下载链接】unlocker VMware Workstation macOS 项目地址: https://gitcode.com/gh_mirrors/unloc/unlocker 在跨平台开发与测试日益重要的今天&#xff0c;许多开发者面临着一个共同的挑战…...

编程新知 2026/4/22 8:22:49

3步解锁微信网页访问：浏览器插件深度解析与部署指南

3步解锁微信网页访问&#xff1a;浏览器插件深度解析与部署指南 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 微信网页版访问限制一直是许多用户在浏…...

编程新知 2026/4/22 7:59:48