ajax和axios的使用和差別

學過前端架構Vue和Spring、SpringMVC之後，在資料互動時，都面臨了一個問題，到底是使用ajax，還是axios，陷入了兩難的境地。那麼，這篇部落格将細數疑惑，講解兩者之間的使用和差別。

一、ajax和axios的使用

1.1 ajax的使用

$.ajax({
　　url: '接口位址',
　　type: 'get', //或者post　　 請求類型
　　dataType: 'json',
　　data: { // 要發送的請求參數
　　　　'username' : 'admin',
　　　　'password' : '123'
　　},
　　success : function (response) {
　　　　console.log(response); // 請求傳回的資料
　　}
})
           

1.2 axios的使用

axios({
　　url: '接口位址',
　　method: 'get', //或者 post    請求類型
　　responseType: 'json', //預設格式，如果就是 json 格式可以不寫
　　data: {
　　　　'username' : 'admin',
　　　　'password' : '123'
　　}
}).then( function(response){ // 請求正确傳回的資料
　　console.log(response);
　　console.log(response.data);
}).catch( function(error) { // 請求錯誤傳回的資料
　　console.log(error);
})
           

兩者在使用上差别不大，寫法幾乎相同。

二、兩者差別

axios是通過promise實作對ajax技術的一種封裝，就像JQuery實作ajax封裝一樣。簡單來說就是：ajax技術實作了網頁的局部資料重新整理，axios實作了對ajax的封裝。也就是說，jQuery 将請求技術進行了封裝 變成了 ajax , 而通過 promise 又把 ajax 進行封裝就成了 axios。

三、各自優缺點

• ajax：

  本身針對MVC架構的程式設計，不符合現階段的MVVM的開發模式。

  基于原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案

  JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）

• axios：

  從 node.js 建立 http 請求

  支援 Promise API

  用戶端支援防止CSRF

  提供了一些并發請求的接口（重要，友善了很多的操作）