使用axios请求接口,几种content-type的区别详解
2021-01-12 15:16:43
36次阅读
0个评论
最后修改时间:2021-01-12 18:14:04

axios的使用

安装(一般使用框架的话, 脚手架都集成了)

<pre class="prettyprint lang-js"><pre class="prettyprint lang-js">$ npm install axios</pre>
//请求示例

<pre class="prettyprint lang-js">// 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) {
 // 两个请求现在都执行完成
 }));</pre>
//可以通过向 axios 传递相关配置来创建请求

//语法: axios(config)

<pre class="prettyprint lang-js">axios({
 method: 'post',
 url: '/user/12345',
 data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
 }
});</pre></pre>

这里, 我就拿以POST的方式传递相关配置来说事, 因为笔者在这里躺了两次坑, 很有必要记录一下, 哈哈.

默认情况下, 不写content-type, 是以json的方式来传递, (Content-Type: application/json;)

<pre class="prettyprint lang-js">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)
 })</pre>

Headers如下:

<pre class="prettyprint lang-js">Form Data
{"firstName":"Fred","lastName":"Flintstone"}: </pre>

另一种情况, 序列化成字符串形式传递

<pre class="prettyprint lang-js">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)
 })</pre>

结果跟上面一致:

<pre class="prettyprint lang-js">Form Data
{"firstName":"Fred","lastName":"Flintstone"}: </pre>

还有一种常见情况, 通过qs库对数据进行编码(前提要安装qs)

<pre class="prettyprint lang-js">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)
 })</pre>

结果:

<pre class="prettyprint lang-js">Request Headers
Content-Type: application/x-www-form-urlencoded
Form Data
firstName: Fred
lastName: Flintstone</pre>

使用qs要注意的点 :

allowDots(多层对象嵌套, 可用.标记)


qs.stringify({ 
 a: { 
  b: { 
   c: 'd', e: 'f' 
  } 
 } 
}, { allowDots: true });
// 'a.b.c=d&a.b.e=f'

以上这篇使用axios请求接口,几种content-type的区别详解就是小编分享给大家的全部内容了

收藏 0 0

登录 后评论。没有帐号? 注册 一个。

moutker

  • 0 回答
  • 0 粉丝
  • 0 关注