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不要對我們的資料進行任何操作即可。