axios中post請求 json 和 application/x-www-form-urlencoded

前端向後端傳輸數據時，若是是get傳輸，直接傳在url後；若是是post傳輸，則在請求體body中傳輸。

在body中的數據格式又有兩種，一種是  json  數據格式，另外一種是 字符串。具體要用哪一種格式取決於後端入參的格式。

 

若是後端接收json數據類型，post 的 headers 須要設置 { ‘content-type’: ’application/json’ }，傳給後端的數據就形如  { ‘name’:’edward’, ‘age’:’25’ } 

 

若是後端接收的是（表單）字符串類型，post 的 headers 需設置  { ‘content-type’: ’application/x-www-form-urlencoded’ }，

，傳輸給後端的數據就形如   ‘name=edward&age=25’  

 

   qs   

qs.stringfy() 將對象序列化成URL的形式

axios默認數據格式爲json,因此：

1.當後端須要接收json格式的數據時,post請求頭不須要設置請求頭，數據格式也不須要咱們去轉換(若數據已是json)；

2.當後端須要接收字符串格式的數據時，咱們須要給post請求頭設置{ ‘content-type’: ’application/x-www-form-urlencoded’ }，

   這個時候若是咱們傳的入參是一個 js 對象，這時候咱們就須要用 qs 轉換數據格式，qs具體用法以下：

 安裝模塊：npm  i  qs  -S

import qs from 'qs'; const data = { name:'edward' , age:'25'}; // 咱們傳的是 js 對象 const options = { method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: qs.stringify(data), // 用 qs 將js對象轉換爲字符串 'name=edward&age=25' url: 'http://www.edward.com'

}; 
axios(options);

 

 咱們也能夠在封裝axios的時候，給它全局設置qs 

axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

 

【區分】： JSON.stringfy()  和 qs.stringfy() 

  let  data = { name: 'edward', age: '25' }

  前者：JSON.stringfy(data)  //  」{ 'name' : 'edward' , 'age' : '25' }」

  後者：qs.stringfy(data)  // 'name=edward&age=25'

【區分】：jQuery 中 $.ajax 的post請求  VS   axios的post 請求的 content-type 默認值

  前者："application/x-www-form-urlencoded"

  後者："application/json"

$.ajax({
   type: 'POST',
   contentType: 'application/json;charset=utf-8', // 發送的數據類型
   dataType: 'json',   // 接收的數據類型
   url: 'http://www.edward.com',
   data: JSON.stringfy(formData),
   success: function (res) {
      console.log(res.data) 
   }
})　

contentType: 告訴服務器，我要發什麼類型的數據

dataType：告訴服務器，我要想什麼類型的數據，若是沒有指定，那麼會自動推斷是返回 XML，仍是JSON，仍是script，仍是String。

 

注意 ：$.ajax() post發送到服務器的數據。將自動轉換爲請求字符串格式。

若是爲對象，如 { name: 'edward', age: '25' }，jQuery 將自動轉化爲 'name=edward&age=25'

若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。