使用axios请求接口中几种content-type的区别是什么

这篇文章主要介绍使用axios请求接口中几种content-type的区别是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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的区别是什么”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！