使用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的區別是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！