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

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

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

　　　　1.Content-Type:application/jsonvue

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

　　　　3.Content-Type:multipart/form-dataios

　　這裏一個個來舉例說明。chrome

1.Content-Type: application/jsonnpm

　　若是沒有特別聲明，application/json是Axios默認的Content-Type，也是我最經常使用的一種，它聲明瞭請求體中的數據將會以json字符串的形式發送到後端。因此，在請求的時候，須要將須要傳給後臺的數據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所示。axios

圖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，則通常用來上傳文件，指定傳輸數據爲二進制數據，例如圖片、mp三、文件，也能夠用來上傳鍵值對。簡單寫法以下：

<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所示。

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