axios请求接口http_使用axios请求接口,几种content-type的区别详解
axios的使用
安装(一般使用框架的话, 脚手架都集成了)
$ npm install axios
请求示例
// POST
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// GET
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 执行多个并发
axios.all([get1(), get2()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
可以通过向 axios 传递相关配置来创建请求
语法: axios(config)
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
这里, 我就拿以POST的方式传递相关配置来说事, 因为笔者在这里躺了两次坑, 很有必要记录一下, 哈哈.
默认情况下, 不写content-type, 是以json的方式来传递, (Content-Type: application/json;charset=UTF-8)
axios({
url:'/api/connect/token',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res => {
console.log(1234, res.data)
}).catch(error => {
console.log(error)
})
Headers如下:
Request Payload
{ firstName: "Fred", lastName: "Flintstone"}
content-type改成x-www-form-urlencoded, 即表单提交方式
axios({
url:'/api/connect/token',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {
'Content-type': 'application/x-www-form-urlencoded'
}
}).then(res => {
console.log(1234, res.data)
}).catch(error => {
console.log(error)
})
Headers如下:
Form Data
{"firstName":"Fred","lastName":"Flintstone"}:
另一种情况, 序列化成字符串形式传递
axios({
url:'/api/connect/token',
method: 'post',
data: JSON.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
})
}).then(res => {
console.log(1234, res.data)
}).catch(error => {
console.log(error)
})
结果跟上面一致:
Form Data
{"firstName":"Fred","lastName":"Flintstone"}:
还有一种常见情况, 通过qs库对数据进行编码(前提要安装qs)
import qs from 'qs'
axios({
url:'/api/connect/token',
method: 'post',
data: qs.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
})
}).then(res => {
console.log(1234, res.data)
}).catch(error => {
console.log(error)
})
结果:
Request Headers
Content-Type: application/x-www-form-urlencoded
Form Data
firstName: Fred
lastName: Flintstone
使用qs要注意的点 :
allowDots(多层对象嵌套, 可用.标记)
qs.stringify({
a: {
b: {
c: 'd', e: 'f'
}
}
}, { allowDots: true });
// 'a.b.c=d&a.b.e=f'
以上这篇使用axios请求接口,几种content-type的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
本文标题: 使用axios请求接口,几种content-type的区别详解
本文地址: http://www.cppcns.com/wangluo/javascript/283227.html
axios请求接口http_使用axios请求接口,几种content-type的区别详解相关推荐
- python接口自动化(十)--post请求四种传送正文方式(详解)
简介 post请求我在python接口自动化(八)–发送post请求的接口(详解)已经讲过一部分了,主要是发送一些较长的数据,还有就是数据比较安全等.我们要知道post请求四种传送正文方式首先需要先了 ...
- axios库读不到cookie_axios中cookie跨域及相关配置示例详解
自从入了vue之后,一直在用axios这个库来做一些异步请求,下面这篇文章主要介绍关于axios中cookie跨域及相关配置的资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴. 前言 最近 ...
- http协议与https协议+UDP协议和TCP协议+WebSocket协议下服务端主动去发送信息+对称加密与非对称加密+get和post请求方式区别详解+浏览器内核以及jsj解析引擎
TCP和UDP协议是TCP/IP协议的核心. 在TCP/IP网络体系结构中,TCP(传输控制协议,Transport Control Protocol).UDP(用户数据报协议,User Data P ...
- 什么是抽象类,接口?他们的区别?(详解)
目录 1.抽象类 2.接口 3.抽象类与接口的联系与区别 1.抽象类 定义: 如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类 这么说可能不好理解,我们来换个说法: 抽象类无法被 ...
- SSD硬盘的接口区别详解图解 SATA、mSATA、PCI-E、M.2(NVMe协议) 、U.2、Type-c、USB、Macbook接口
转 扫盲:SATA.mSATA .PCIe和M.2--SSD硬盘的接口 2019年03月02日 20:47:06 nedwons 阅读数 11035更多 个人分类: 非技术 SATAT通道:硬盘--内 ...
- python接口自动化(三十九)- logger 日志 - 上(超详解)
简介 Python的logging模块提供了通用的日志系统,可以方便第三方模块或者是应用使用.这个模块提供不同的日志级别,并可以采用不同的方式记录日志,比如文件,HTTP GET/POST,SMTP, ...
- get request uni 参数_接口测试实战| GET/POST 请求区别详解
在日常的工作当中,HTTP 请求中使用最多的就是 GET 和 POST 这两种请求方式.深度掌握这两种请求方式的原理以及异同之处,也是之后做接口测试一个重要基础. GET.POST 的区别总结 请求行 ...
- java集合详解_Map、Set、List及其子类和接口你都明白吗?看这篇Java集合超详解
前言: 为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 数组和集合类同是容器,有何不同? 长度上:数组 ...
- 接口测试实战| GET/POST 请求区别详解
1.请求行的 method 不同: 2.POST 可以附加 body,可以支持 form.json.xml.binary等各种数据格式: 3.从行业通用规范的角度来说,无状态变化的建议使用 GET 请 ...
最新文章
- CDOJ 251 导弹拦截 最长递增子序列
- perl的安装和版本切换工具-perlbrew
- 计算机网络电缆被拔出是怎么办,网络电缆被拔出是什么意思?网络电缆被拔出的修复办法...
- JS鼠标滚轮事件详解
- 构建LAMP平台(一)(软件版本:httpd-2.4.16,php-5.6.12,mysql-5.6.26)
- 去掉a标签下划线_条码软件如何修改条码标签的字体格式
- Python入门学习资料分享
- [github高级控件]带你走近-自定义标签云
- exsi添加gpu卡 v100s和a100 配置直通模式虚机电源启动失败
- win10ie服务器未响应,win10ie浏览器老是无响应是什么原因?解决win10ie浏览器老是无响应的方法介绍...
- Pollard-Rho Algorithm简述
- 企业微信第三方应用开发--回调配置
- 如何设计出优秀的EDM邮件营销模板
- 刚刚整理好-汉字转拼音缩写的函数(C#)
- 大疆 IC设计校招笔试题目
- google AdView
- 国产数据库发展现状分析
- wps表格粗线和细线区别_wps论文三线表的粗线是多少
- Cadence OrCAD快速查找元件和网络的方法
- delphi 7中EhLib3.x控件的安装心得
热门文章
- C++中的字符串的部分功能
- 108. 奇数码问题【思维 / 逆序对】
- 【PAT乙级】1003 我要通过! (20 分)详解
- logitech g hub一直在初始化_Wi-Fi中“2.4G”和“5G”的那些事儿
- 解密微信小程序Java登录流程(ssm实现具体功能)
- 2021-9-下旬 数据结构-线性表-动态数组-java代码实现
- java中打开指定的文件夹
- 创建JPA工程时提示:at least one user library must be selected
- php如何获取ftp文件信息,FTP 得到文件树[php]
- (Java集合框架)List接口