2018年05月26日 11:47:55?心誠則靈--艾?閱讀數(shù) 7669
axios作為Vue生態(tài)系統(tǒng)中濃墨重彩的一筆，我學(xué)習(xí)這個(gè)東西也是花了一定的時(shí)間的。剛開始的時(shí)候，也是遇到了很多問題。
逐漸摸透了它的脾氣。
首先說說FormData和Payload兩種數(shù)據(jù)格式的區(qū)別：
先是提交一個(gè)FormData的請(qǐng)求試試看：
然后我們看后端：
然后我們提交一個(gè)以Payload傳輸數(shù)據(jù)的請(qǐng)求：
我們?cè)偾械胶笈_(tái)：
這就是使用axios和jquery ajax最大的區(qū)別。
jquery提交數(shù)據(jù)的時(shí)候，默認(rèn)是以FormData的形式提交的，也就是Content-Type:"application/x-www-form-urlencoded",
而默認(rèn)axios是使用的是Payload形式提交數(shù)據(jù)，也就是Content-Type:"application/json"
如何切換呢，我們需用應(yīng)用以下方式：
var?params?=?new?URLSearchParams();??
params.append('param1',?'value1');??
params.append('param2',?'value2');??
它的意思，其實(shí)就是把這樣的數(shù)據(jù)（對(duì)象）{ name:"yangxu",age:23 } 轉(zhuǎn)換成這樣的數(shù)據(jù)（字符串） "name=yangxu&age=23"這樣的查詢字符串。
如果我們每次需要傳遞數(shù)據(jù)的時(shí)候，都這樣寫，是很復(fù)雜的，于是，我們可以進(jìn)行一次全局配置，將請(qǐng)求數(shù)據(jù)按照需求進(jìn)行相應(yīng)的轉(zhuǎn)化：
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);??
??}]??
});??
然后，我們可以把這個(gè)axios的實(shí)例掛在到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);??
???????});??
這樣，問題雖然解決了，我們需要進(jìn)行反思。
FormData和Payload傳輸數(shù)據(jù)應(yīng)用場(chǎng)景：我個(gè)人根據(jù)自己的實(shí)際開發(fā)進(jìn)行總結(jié)得出，如果前臺(tái)提交給后臺(tái)的數(shù)據(jù)是確定的（什么是確定的，就是你提交的數(shù)據(jù)格式不會(huì)因?yàn)橛脩舻牟僮鞫淖?，如可選項(xiàng)，用戶填寫了那么提交，沒就不提交，后臺(tái)接收是可空類型），如果是不確定的（比如我用戶點(diǎn)擊一個(gè)操作，就必須新增一條數(shù)據(jù)，后臺(tái)記錄的是前臺(tái)提交過去的數(shù)組），此時(shí)可以采用Payload形式提交?？傊?，根據(jù)自己的業(yè)務(wù)選擇合適的數(shù)據(jù)提交方式。
有一種特殊的業(yè)務(wù)場(chǎng)景，就是需要進(jìn)行文件上傳的時(shí)候，此時(shí)我們只能采用Payload的形式上傳。
先看業(yè)務(wù)場(chǎng)景截圖：
我們想在上傳文件的時(shí)候，并且同時(shí)帶給后端一些數(shù)據(jù)，那么，我們采用HTML5提供的FormData API，這個(gè)對(duì)象比較特殊，不要嘗試破壞它的結(jié)構(gòu)，否則是無法上傳的，具體的使用方式請(qǐng)參考MDN。
此時(shí)，我們需要對(duì)我們的transformRequest方法進(jìn)行一些修改：
我們?cè)谡{(diào)用的時(shí)候，手動(dòng)指定Content-Type為“application/json”，告訴axios不要對(duì)我們的數(shù)據(jù)進(jìn)行任何操作即可。
