使用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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jquery ui对话框实例代码
May 10 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 Javascript
vue实现日历表格(element-ui)
Sep 24 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函数
2006/10/09 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP实现文件下载详解
2014/11/27 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
MySQL面试题目集锦
2016/04/14 面试题
公司司机岗位职责范本
2014/03/03 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2019广播稿怎么写
2019/04/17 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android