Vue2.0之后，官方不再繼續維護vue-resource，尤雨溪大大推薦使用Axios用來替代Ajax。

Axios請求頭中的Content-Type常見的有3種：

1.Content-Type:application/json

2.Content-Type:application/x-www-form-urlencoded

3.Content-Type:multipart/form-data

這里一個個來舉例說明。

1.Content-Type: application/json

如果沒有特別聲明，application/json是Axios默認的Content-Type，也是我最常用的一種，它聲明了請求體中的數據將會以json字符串的形式發送到后端。所以，在請求的時候，需要將需要傳給后臺的數據JSON序列化即可。

var params ={"range": {"length": 100,"start": 0},"branchId": '100001'};this.$axios.post("/XXXX/XXXX", params).then(data =>{//To Do

});

我們可以在谷歌瀏覽器F12的network中看到Request Payload，如圖1所示。

圖1 Axios默認Content-Type:application/json

2.Content-Type:?application/x-www-form-urlencoded

Content-Type:application/x-www-form-urlencoded，則聲明了請求體中的數據會以鍵值對(普通表單形式)發送到后端，這種類型是Ajax默認的。偶爾后端需要我要傳鍵值對給他們，那這個時候，就需要在頭部設置headers:?{?'Content-Type':'application/x-www-form-urlencoded'},

然后，將請求體中的數據設置為鍵值對。但是我們封裝的請求體一般是JSON對象，這個時候，就可以使用qs庫將對象轉為url參數形式。

qs是Axios默認就有的，就不需要再npm了。其作用有二：1.將url中的參數轉為對象；2.將對象轉為url參數形式。

import qs from 'qs';var url='userId=admin&password=hellworld';//轉為對象

console.log(qs.parse(url));var person = {name:'lihua',age:18};//轉為url參數形式

console.log(qs.stringify(person));

在瀏覽器輸出如圖2所示。

圖2 qs的作用

我比較愛用的就是這種方法，簡單粗暴，如圖3所示。在谷歌瀏覽器F12的network中Form Data，如圖4所示。

import qs from 'qs'

var data = {

"username": "admin",

"password": "123456"

}

axios({

url: '/OAuth/oauth/token',

method: 'post',

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

},

data: qs.stringify(data)

})

圖3 我在工程中的對application/x-www-form-urlencoded的使用

圖4?AjAx默認Content-Type:application/x-www-form-urlencoded

有一次出現的一個問題，覺得有必要記錄一下。一旦使用qs庫的方法，就應該注意不能對請求體中的數據使用擴展運算符。否則，你就會看到請求體種出現如圖5的情況。

圖5 formdata展示請求體出現神奇的現象

可以看到圖3，這個request實例是從'@/plugin/axios'中定義出來的，我們去看這個'@/plugin/axios'里的請求攔截部分service.interceptors.request.use()，很容易就看出問題了，問題就出在這三個點上，如圖6所示：擴展運算符將一個數組、類數組、字符串轉化為用逗號分隔的序列。

圖6 qs庫方法的時候請勿與擴展運算符共同使用

還有一種方法就是使用URLSearchParams對象，寫法如下：

let data = newURLSearchParams();

data.append('username', 'admin');

data.append('password', '123456');

axios({

url:'/OAuth/oauth/token',

method:'post',

headers: {'Content-Type': 'application/x-www-form-urlencoded'},

data: data

})

3.Content-Type:?multipart/form-data

Content-Type:multipart/form-data，則一般用來上傳文件，指定傳輸數據為二進制數據，例如圖片、mp3、文件，也可以用來上傳鍵值對。簡單寫法如下：

let data= newFormData();

data.append('userfile', document.querySelector('input[type=file]').files[0]);

data.append('username', 'admin');

data.append('password', '123456');

axios({

url:'/XXXX/XXXX',

method:'post',

headers: {'Content-Type': 'multipart/form-data'},

data: data

})

大致意思就是你正常發起的一個請求，瀏覽器都會簡單的將你提交的內容展示出來。所展示的內容只是因為Content-Type設置的不同，而并不是因為數據提交方式的不同。如果一個請求的header設置為Content-Type:application/json，那么瀏覽器就會以Request Payload來顯示你的請求體，所以基本數據格式為JSON對象，如圖1所示；如果一個請求被設置為method="post"，并且請求的header設置為Content-Type:application/x-www-form-urlencoded或者Content-Type:multipart/form-data，那么瀏覽器就會以Request Payload來顯示你的請求體，所以基本數據格式為鍵值對，如圖4所示。

原文出處：https://www.cnblogs.com/jdWu-d/p/12036528.html

總結

以上是生活随笔為你收集整理的axios获取header中的信息_Axios请求头中常见的Content-Type及其使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。