前提

老舊的項目在前端頁面轉型為vue框架的時候都應該會思考一個問題：
在請求上是繼續沿用以前的jquery-ajax，還是改用與vue搭配的axios

如果你繼續使用jquery-ajax那么以下的內容對你來說就沒什么用處
如果你使用了axios那么你就會可能會碰到他們之間因為細微不同造成的請求失敗問題

以下是我在使用過程中碰到的一些情況和解決方案

1.普通的ajax GET POST請求

兩者之間很相似，使用起來沒太大區別
以此為依據可以得出一個結論，如果不使用ajax特定封裝方法，兩者區別應該不大

所以以下描述的所有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){
  
});

數據圖示：

FSLS3KQ%LF($69VXB3[A$LA.png

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請求數據暴露比較嚴重
傳遞過去的數據需要使用FormData對象
需要設置請求頭，總體來說代碼量會大一些

數據圖示：
![ZMUWVY0%}@L4VHJLR4@OAI.png

3.文件上傳

ajax可以使用ajaxFileUpload上傳文件

//除了下面這種方式
$.ajaxFileUpload({
  url:'/uploadFiles',
  fileElementId:'id',//對應input元素的id
  type:'POST',
  dataType : 'json',
  secureuri : false,
  success:function(filePaths, status){          
  },
  error:function(xhr, status, e){
  }
});

//axios
var fd = new FormData();
fd.append("mFile",item.file);
Axios({
  url："/upload",
  method："POST",
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  params:{
  },
  data:fd ,
  onUploadProgress:function(progressEvent){
    if (progressEvent.lengthComputable) {
      let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
      //item.status = parseInt(val)+"%";
    }
  },
}).then(function (response){
  
}).catch(function(error){
  
});

文件上傳數據表現形式與上面描述的form表單上傳一致

4.特殊數據格式

Z{TA4XW6MYHBEA9{1(FCVDT.png

如果你看到你之前上傳的數據是這種格式
使用ajax可能只是簡單上傳一個數組，但是axios必須特殊處理

//macroPaths是一個簡單的文本組成的數組
$.ajax({
  url: '/formengineWebService/getFileConvertState',
  type: 'POST',
  dataType: 'json',
  data: {macroPaths:macroPaths},
  success:function(result){
                        
  },
  error: function(xhr,stat,exmsg){
                        
  }
});

//當時用axios時
//應該使用URLSearchParams來組裝數據
//至于是否必須如此我不確定，實測使用這樣的形式是可以的
var form = new URLSearchParams();
//如果是多條需要循環添加
form.append("macroPaths[]",url);
Axios({
  url："/query",
  method："POST",
  params:{
  },
  data:form
}).then(function (response){
  
}).catch(function(error){
  
});

最近新碰到的問題

沒有任何多余設置的axios請求，請求起來傳遞過去的參數總是多一個括號導致后臺取不到數據
然后網上查詢得出結論 axios的默認請求頭可能是application/json 所以各位如果沒特殊需求可以改一下默認配置或者封裝的時候給他一個默認的和ajax一樣的請求頭

后記

暫時只碰到這幾種對接轉換形式，大致上夠用了，如果以后碰到其他的再來添加
其實這些東西可以簡單封裝一下弄成和jquery類似的方法，那么使用起來應該會簡單很多，找到對應的方法就行