前提
老舊的項目在前端頁面轉(zhuǎn)型為vue框架的時候都應該會思考一個問題：
在請求上是繼續(xù)沿用以前的jquery-ajax肚逸，還是改用與vue搭配的axios
如果你繼續(xù)使用jquery-ajax那么以下的內(nèi)容對你來說就沒什么用處
如果你使用了axios那么你就會可能會碰到他們之間因為細微不同造成的請求失敗問題
以下是我在使用過程中碰到的一些情況和解決方案
1.普通的ajax GET POST請求
兩者之間很相似亲铡，使用起來沒太大區(qū)別
以此為依據(jù)可以得出一個結(jié)論拉背，如果不使用ajax特定封裝方法，兩者區(qū)別應該不大
所以以下描述的所有axios使用方式也可以使用最簡單的ajax加同樣的配置來使用
$.ajax({
url: "/query?a="+a+"&b="+b,
type: "GET/POST",
params:{
},
data:{
},
success: function(data){
},
error: function(xhr,stat,exmsg){
}
});
Axios({
url："/query?a="+a+"&b="+b,
method："GET/POST",
params:{
},
data:{
},
}).then(function (response){
}).catch(function(error){
});
數(shù)據(jù)圖示：
2.form表單提交
ajax可以直接選取form元素使用ajaxSubmit方式提交表單
//ajax
//url的設置在form元素上
$('#form').ajaxSubmit({
beforeSubmit: function(data,sender,options) {
},
success: function(data) {
},
error:function(xhr,stat,msg){
}
})
//axios
let form = new FormData();
form.append("a",a);
form.append("b",b);
Axios({
url："/upload",
method："POST",
headers: {
'Content-Type': 'multipart/form-data'
},
params:{
},
data:form
}).then(function (response){
}).catch(function(error){
});
一般提交都是post請求泪酱，get請求數(shù)據(jù)暴露比較嚴重
傳遞過去的數(shù)據(jù)需要使用FormData對象
需要設置請求頭变骡，總體來說代碼量會大一些
數(shù)據(jù)圖示：
如果你看到你之前上傳的數(shù)據(jù)是這種格式
使用ajax可能只是簡單上傳一個數(shù)組衔蹲，但是axios必須特殊處理
//macroPaths是一個簡單的文本組成的數(shù)組
$.ajax({
url: '/formengineWebService/getFileConvertState',
type: 'POST',
dataType: 'json',
data: {macroPaths:macroPaths},
success:function(result){
},
error: function(xhr,stat,exmsg){
}
});
//當時用axios時
//應該使用URLSearchParams來組裝數(shù)據(jù)
//至于是否必須如此我不確定肢娘，實測使用這樣的形式是可以的
var form = new URLSearchParams();
//如果是多條需要循環(huán)添加
form.append("macroPaths[]",url);
Axios({
url："/query",
method："POST",
params:{
},
data:form
}).then(function (response){
}).catch(function(error){
});
最近新碰到的問題
沒有任何多余設置的axios請求，請求起來傳遞過去的參數(shù)總是多一個括號導致后臺取不到數(shù)據(jù)
然后網(wǎng)上查詢得出結(jié)論 axios的默認請求頭可能是application/json 所以各位如果沒特殊需求可以改一下默認配置或者封裝的時候給他一個默認的和ajax一樣的請求頭
后記
暫時只碰到這幾種對接轉(zhuǎn)換形式舆驶，大致上夠用了橱健，如果以后碰到其他的再來添加
其實這些東西可以簡單封裝一下弄成和jquery類似的方法，那么使用起來應該會簡單很多沙廉，找到對應的方法就行
