axios的基本特性用法

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是经过响应拦截器处理后的数据
  • 注:文中部分内容来源于网络,联系侵删

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/705056.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在 VM 虚拟机中安装 Windows 7 操作系统保姆级教程(附链接)

一、VMware Workstation 虚拟机 没有安装 VM 虚拟机的参考以下文章进行安装&#xff1a; VM 虚拟机安装教程​编辑https://eclecticism.blog.csdn.net/article/details/135713915https://eclecticism.blog.csdn.net/article/details/135713915 二、Windows 7 镜像 点击链接…

大语言模型LLM参数微调:提升6B及以上级别模型性能(LLM系列009)

文章目录 大语言模型LLM参数微调&#xff1a;提升6B及以上级别模型性能&#xff08;LLM系列009&#xff09;序章LLM参数微调的核心原理预训练与微调过程技术细化 LLM参数微调实战案例详解案例一&#xff1a;文本分类任务微调案例二&#xff1a;问答系统任务微调案例三&#xff…

C++:类与对象(2)

创作不易&#xff0c;感谢三连&#xff01; 一、六大默认成员函数 C为了弥补C语言的不足&#xff0c;设置了6个默认成员函数 二、构造函数 2.1 概念 在我们学习数据结构的时候&#xff0c;我们总是要在使用一个对象前进行初始化&#xff0c;这似乎已经成为了一件无法改变的…

cypher操作图数据库

简单示例 sql语法返回值 sql语法 在Match语法中&#xff0c;无法对关系使用$引入变量&#xff08;案例中的max_path_len&#xff09;。如果一定要引入&#xff0c;就使用format的字符串占位符方法。在Match语法中&#xff0c;允许对节点的属性使用$引入变量。如果sql已经使用了…

【论文笔记之 YIN】YIN, a fundamental frequency estimator for speech and music

本文对 Alain de Cheveigne 等人于 2002 年在 The Journal of the Acoustical Society of America 上发表的论文进行简单地翻译。如有表述不当之处欢迎批评指正。欢迎任何形式的转载&#xff0c;但请务必注明出处。 论文链接&#xff1a;http://audition.ens.fr/adc/pdf/2002_…

数据结构知识点总结-特殊矩阵-矩阵的压缩存储

特殊矩阵 定义 矩阵在计算机图形学中占有很重要的地位。在数据结构中我们不研究矩阵的运算,而是侧重于如何将矩阵高效的存储在内存中,并能方便的提取矩阵中的元素。 数组的概念 数组是由n(n>=0)个相同类型的数据元素构成的有限序列,每个数据元素称为一个数组元素,每…

基于smilehappiness-framework-base,快速集成ShardingSphere JDBC

文章目录 1 前言2 分库分表2.1 什么是分库分表2.2 垂直分库2.3 水平分表 3 如何集成使用分库分表3.1 添加maven依赖3.2 添加 shardingSphere 数据源3.2 添加 sharding jdbc 配置3.2.1 分表配置示例3.2.2 分库且分表配置示例 1 前言 为什么使用分库分表&#xff1f;随着业务量的…

【Fastadmin】动态下拉(SelectPage)

目录 1.常规用法: 2.常用属性: 3.联动用法:三级分类为例 FastAdmin中的动态下拉列表使用的是优秀强大的Selectpage插件,FastAdmin对其进行了二次开发。 1.常规用法: <input id="c-name" data-rule="required" data-source="category/sele…

vue3_父组件调用子组件的某个方法

父组件&#xff1a; <template><div class"father"><el-button click"handle">触发子组件事件</el-button><child ref"children"/></div> </template><script setup lang"ts"> impo…

C# OpenCvSharp 颜色反转

目录 效果 灰度图 黑白色反转 彩色反转 项目 代码 下载 效果 灰度图 黑白色反转 彩色反转 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Te…

电机应用中的大功率电阻器?

在这篇文章中&#xff0c;我们将考虑电机应用中的电阻器。 交流、直流和专用电机用于广泛的应用。一些电机应用相对简单&#xff0c;唯一需要关注的是电机的启动和关闭。在这里&#xff0c;成本、简单性和可靠性是主要问题&#xff0c;而电机控制电阻器是常见的解决方案。 在…

【数据结构】B树,B+树,B*树

文章目录 一、B树1.B树的定义2.B树的插入3.B树的中序遍历 二、B树和B*树1.B树的定义2.B树的插入3.B*树的定义4.B树系列总结 三、B树与B树的应用 一、B树 1.B树的定义 1. 在内存中搜索效率高的数据结构有AVL树&#xff0c;红黑树&#xff0c;哈希表等&#xff0c;但这是在内存…

解决:selenium web browser 的版本适配问题

文章目录 解决方案&#xff1a;使用 webdriver manager 自动适配驱动 使用 selenium 操控浏览器的时候报错&#xff1a; The chromedriver version (114.0.5735.90) detected in PATH at /opt/homebrew/bin/chromedriver might not be compatible with the detected chrome ve…

IK分词器

下载 elasticsearch&#xff1a;https://www.elastic.co/cn/elasticsearch elasticsearch-analysis-ik&#xff1a;https://github.com/medcl/elasticsearch-analysis-ik 启动 elasticsearch&#xff1a;elasticsearch\bin\elasticsearch.bat http://localhost:9200 启动 kiban…

AutoSAR(基础入门篇)11.5-服务映射(自顶向下)

目录 一、配置Service Needs 二、配置Cfg同步 我们在下一节的实验课中讲解这里的具体配置流程,本节主要讲一下这些配置的大致流程和配置项的作用。NvBlockSwComponents是一个可选项, 我们这里开始不使用NvBlockSwComponents,将我们的Application SWC直接和NvM通过C/S连接起…

C++面试宝典第32题:零钱兑换

题目 给定不同面额的硬币coins和一个总金额amount,编写一个函数来计算可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额,则返回-1。说明:你可以认为每种硬币的数量是无限的。 示例1: 输入:coins = [1, 2, 5], amount = 11 输出:3 解释:11 = …

golang 函数式编程库samber/mo使用: Either

golang 函数式编程库samber/mo使用&#xff1a; Either 如果您不了解samber/mo库&#xff0c; 请先阅读第一篇 Option 结构定义 有时候我们不确定值的类型&#xff0c; 一个值可能是int&#xff0c; 也可能是string&#xff0c; 这时候我们可以使用Either类型。 Either类型是…

SQL-Labs靶场“29-31”关通关教程

君衍. 一、二十九关 基于错误的WAF单引号注入1、源码分析2、HTTP参数污染3、联合查询注入4、updatexml报错注入 二、三十关 基于错误的WAF双引号注入1、源码分析2、联合查询注入3、updatexml报错注入 三、三十一关 基于错误的WAF双引号括号注入1、源码分析2、联合查询注入3、up…

【JavaEE】_前端使用GET请求的queryString向后端传参

目录 1. GET请求的query string 2. 关于query string的urlencode 1. GET请求的query string 1. 在HttpServletRequest请求中&#xff0c;getParameter方法用于在服务器这边获取到请求中的参数&#xff0c;主要在query string中&#xff1b; query string中的键值对都是程序…

C#中的关键字params的用法

C#中有一个关键字params&#xff0c;它相对于一些主要关键字来说&#xff0c;还算是较为低频的&#xff0c;但也会用到。我们可以了解和学习下。 一、定义及约束 params关键字的作用在于可以让方法参数的数目可变。 params的参数类型必须是一维数组。 一旦在方法加入了para…