使用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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jquery延迟对象解析
2016/10/26 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
个人安全生产承诺书
2014/05/22 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2016寒假假期总结
2015/10/10 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸