Axios請求頭中常見的Content-Type及其使用

　　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 = new URLSearchParams();
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、文件，也可以用來上傳鍵值對。簡單寫法如下：

<input type="file" />

let data = new FormData();
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
})

　　這里說點題外話，Request Payload翻譯過來就是請求載荷，就是一種載體。但是我百度了很久也沒找到它的定義，最后終於在stackoverflow上發現一個大佬lefloh給出了他的理解得到了大家的支持，大家有興趣可以去看看，鏈接在此：https://stackoverflow.com/questions/23118249/whats-the-difference-between-request-payload-vs-form-data-as-seen-in-chrome；

　　大致意思就是你正常發起的一個請求，瀏覽器都會簡單的將你提交的內容展示出來。所展示的內容只是因為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所示。