余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

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

xiyangw 2022-11-24 17:01 14 浏览 0 评论

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请求接口,几种content-type的区别

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)
    })

请求头如下:

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)
    })

请求头如下:

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'

好了,就写到这里,同学们在跟服务端对接接口过程中出现问题,可以多对传递的格式做调试,那么就能发现其中的变化,就能定位到问题所在。

相关推荐

JavaScript框架的四个时代(javascript框架是什么)
JavaScript框架的四个时代(javascript框架是什么)

作者:Chris早在2012年,我就开始主要用JavaScript进行编程。我曾为一家本地企业用PHP从头到尾做了一个应用,一个基本的CMS内容管理系统和网站,...

2023-03-21 19:35 xiyangw

出于安全考虑,开发人员告诉用户不要启动这个顶级 Linux 发行版
出于安全考虑,开发人员告诉用户不要启动这个顶级 Linux 发行版

流行的TailsLinux发行版的开发人员(在新标签中打开)已警告用户在下一个版本发布之前不要使用该操作系统,如果他们使用它来输入或访问敏感信息(在新标签...

2023-03-21 19:34 xiyangw

关于eBay的禁止动态内容(关于ebay的禁止动态内容有哪些)
关于eBay的禁止动态内容(关于ebay的禁止动态内容有哪些)

动态政策JavaScript、Flash、插件及窗体操作等动态内容已无法在刊登物品中显示。如果卖家在刊登物品中包含动态内容,该内容将无法正常显示,这将影响买家的...

2023-03-21 19:34 xiyangw

WordPress文章防复制代码(wordpress复制网站)
WordPress文章防复制代码(wordpress复制网站)

酱茄jiangqie.com多人问WordPress文章怎么防止别人复制,今天酱茄小编把代码分享给大家,通过下面的JS代码即可有效的防止别人直接复制你的文章,...

2023-03-21 19:34 xiyangw

iOS9.3再爆新问题:点链接造成应用卡死(应用中打开链接)
iOS9.3再爆新问题:点链接造成应用卡死(应用中打开链接)

北京时间3月30日消息,苹果在一周前正式向用户推送了最新版本的iOS系统,即iOS9.3,但该系统却问题不断。现在新版的iOS9.3又爆出新问题,当点击Sa...

2023-03-21 19:33 xiyangw

google浏览器禁用JavaScript,突破右键复制等限制
google浏览器禁用JavaScript,突破右键复制等限制

按F12进入调试模式,点击“设置”,找到Debugger,勾选DisableJavaScript...

2023-03-21 19:33 xiyangw

ajax的优缺点有哪些(ajax有什么缺点)
ajax的优缺点有哪些(ajax有什么缺点)

什么是ajax?ajax代表异步JavaScript和XML。“异步”一词意味着用户无需等待服务器回复。AJAX不是编程或脚本语言,没有新发明,也没有单独的We...

2023-03-21 19:33 xiyangw

网友发现电脑CPU使用率经常飙升至100%!太意外了
网友发现电脑CPU使用率经常飙升至100%!太意外了

作为全球最大的BT下载网站ThePirateBay(海盗湾)已经不仅仅靠显示广告赚钱了。根据网站TorrentFreak的报道,海盗湾除了提供音乐、影片、软...

2023-03-21 19:32 xiyangw

若用户浏览器禁用JavaScript,谷歌将不再允许其登录

据ZDNet报导,Google昨天宣布了四项用于保护Google账户的新安全功能,不仅用于加强用户登录账户前后的保护,也适用于在受到黑客攻击后恢复的情况。其中一项为:Google使用Jav...

若用户浏览器禁用JavaScript Google将不再允许其登录

PingWest品玩11月1日讯,据ZDNet报导,Google昨天宣布了四项用于保护Google账户的新安全功能,不仅用于加强用户登录账户前后的保护,也适用于在受到黑客攻击后恢复的情况。第一...

干货分享 | JavaScript 基础知识(直播干货分享)
干货分享 | JavaScript 基础知识(直播干货分享)

随着现在技术行业门槛的不断提高,大多数的小伙伴们想要学前端或者是入门前端行业,就必须要掌握一定基础的JavaScript语言知识,本文档将介绍绝大部分常用的...

2023-03-21 19:31 xiyangw

第34节 Web浏览器中的Javascript-零点程序员
第34节 Web浏览器中的Javascript-零点程序员

本内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。JavaScript由最初的一个原始的脚本语言,已...

2023-03-21 19:31 xiyangw

JavaScript ES2019 中的 8 个新功能(javascript 菜鸟教程)
JavaScript ES2019 中的 8 个新功能(javascript 菜鸟教程)

JavaScript一直在不断改进和添加更多新功能。TC39已经完成,并批准了ES2019的8项新功能。这个过程包含了5个阶段:第0阶段:稻...

2023-03-21 19:30 xiyangw

JavaScript 对象可以做到的三件事(在浏览器上运行javascript程序,可以)

除了普通的对象属性赋值和遍历之外,我们还可以使用JavaScript对象执行许多其他操作。在本文中,我们将了解如何使用它们,包括访问内部属性、操作属性描述符和继承只读属性。1.访问内部属性Jav...

冰与火之歌:JavaScript 的困境与挑战(冰与火之舞url)
冰与火之歌:JavaScript 的困境与挑战(冰与火之舞url)

最近几年以来,伴随着各个端平台的迅猛发展,以TypeScript、Swift、Kotlin和Dart为代表的新一代应用编程语言纷纷浮现。群雄环伺之下,J...

2023-03-21 19:30 xiyangw

取消回复欢迎 发表评论: