vue體系中axios請求對比jquery-ajax請求

前提

老舊的項目在前端頁面轉型為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類似的方法,那么使用起來應該會簡單很多,找到對應的方法就行

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,632評論 1 45
  • 一、前言 對于后端開發來說,經常要和前端進行聯系的兩個面就是:1、表單form提交至servlet。2、ajax提...
    7葉閱讀 2,821評論 1 5
  • 靖王老師2017年的第四本書《忙碌爸爸也是好爸爸》,這本書籍是專門為我們的父親量身定制的,內容簡單、詼諧、有趣,滿...
    帥氣的靖王閱讀 179評論 0 0
  • 01. 2017年8月28日,晴 QQ群里有同學說,七夕可以送女生花 我問他:多少錢一支 他說:不要錢。...
    溫暖與勇敢閱讀 221評論 0 0
  • 和同事聊天,發現女人和女人在一起,所聊的少不了公婆,少不了婚姻家庭瑣事。的確,誰沒有一地雞毛呢?有多少不為人知的痛...
    想飛的樹不如草閱讀 156評論 0 0