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所