使用axios请求接口,几种content-type的区别详解


Posted in Javascript onOctober 29, 2019

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的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
javascript实现倒计时效果
Feb 17 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 #Javascript
vue实现路由监听和参数监听
Oct 29 #Javascript
基于axios 的responseType类型的设置方法
Oct 29 #Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 #Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 #Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 #Javascript
javascript实现简单打字游戏
Oct 29 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python生成数字图片代码分享
2017/10/31 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
Django组件cookie与session的具体使用
2019/06/05 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python getopt模块使用实例解析
2019/12/18 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
市场部专员岗位职责
2013/11/30 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
办公室人员先进事迹
2014/01/27 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
新教师培训心得体会
2014/09/02 职场文书
污染环境建议书
2015/09/14 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS