axios作爲Vue生態系統中濃墨重彩的一筆，我學習這個東西也是花了一定的時間的。剛開始的時候，也是遇到了很多問題。
逐漸摸透了它的脾氣。
首先說說FormData和Payload兩種數據格式的區別：
先是提交一個FormData的請求試試看：
然後我們看後端：
然後我們提交一個以Payload傳輸數據的請求：
我們再切到後臺：
這就是使用axios和jquery ajax最大的區別。
jquery提交數據的時候，默認是以FormData的形式提交的，也就是Content-Type:"application/x-www-form-urlencoded",
而默認axios是使用的是Payload形式提交數據，也就是Content-Type:"application/json"
如何切換呢，我們需用應用以下方式：
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
它的意思，其實就是把這樣的數據（對象）{ name:"yangxu",age:23 } 轉換成這樣的數據（字符串） "name=yangxu&age=23"這樣的查詢字符串。
如果我們每次需要傳遞數據的時候，都這樣寫，是很複雜的，於是，我們可以進行一次全局配置，將請求數據按照需求進行相應的轉化：
import Vue from 'vue'
import querystring from 'querystring'
import axios from "axios"
export const baseURL = process.env.NODE_ENV === 'production' ? '/' : '/api';
export const http = axios.create({
baseURL: baseURL,
timeout: 10000,
withCredentials: true,
headers: {'X-Requested-With': 'XMLHttpRequest'},
transformRequest: [data => {
return querystring.stringify(data);
}]
});
然後，我們可以把這個axios的實例掛在到Vue的原型上：Vue.prototype.$http=http;
然後在Vue的組件裏面，就可以這樣用：
this.$http.post('/Home/GetInfo',{
sName:"yangxu",
sId:20
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
這樣，問題雖然解決了，我們需要進行反思。
FormData和Payload傳輸數據應用場景：我個人根據自己的實際開發進行總結得出，如果前臺提交給後臺的數據是確定的（什麼是確定的，就是你提交的數據格式不會因爲用戶的操作而改變，如可選項，用戶填寫了那麼提交，沒就不提交，後臺接收是可空類型），如果是不確定的（比如我用戶點擊一個操作，就必須新增一條數據，後臺記錄的是前臺提交過去的數組），此時可以採用Payload形式提交。總之，根據自己的業務選擇合適的數據提交方式。
有一種特殊的業務場景，就是需要進行文件上傳的時候，此時我們只能採用Payload的形式上傳。
先看業務場景截圖：
我們想在上傳文件的時候，並且同時帶給後端一些數據，那麼，我們採用HTML5提供的FormData API，這個對象比較特殊，不要嘗試破壞它的結構，否則是無法上傳的，具體的使用方式請參考MDN。
此時，我們需要對我們的transformRequest方法進行一些修改：
我們在調用的時候，手動指定Content-Type爲“application/json”，告訴axios不要對我們的數據進行任何操作即可。