使用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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
vue的mixins属性详解
Mar 14 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
js判断两个数组相等的5种方法
May 06 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
对Python中type打开文件的方式介绍
2018/04/28 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
应届生自我鉴定
2013/12/11 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
统计员岗位职责
2015/02/11 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
产品调价通知函
2015/04/20 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
超详细Python解释器新手安装教程
2021/05/10 Python
MySQL一些常用高级SQL语句
2021/07/03 MySQL
各种货币符号快捷输入
2022/02/17 杂记
Github 使用python对copilot做些简单使用测试
2022/04/14 Python