前后端數據交互(六)——ajax 、fetch 和 axios 優缺點及比較

一、ajax、fetch 和 axios 簡介

1.1、ajax

ajax是最早出現發送后端請求的技術，屬於原生 js 。ajax使用源碼，請點擊《原生 ajax 請求詳解》查看。一般使用之前，我們都需要把它們封裝使用，就以 jQuery 的 ajax 為例。

封裝的 ajax 如下：

const $ = {};
$.ajax = (obj)=>{
 var xhr;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) { // IE
  try {
   xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
   try {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
   } catch (e) {}
  }
 }
 if (xhr) {
  xhr.onreadystatechange = () =>{
   if (xhr.readyState === 4) {
    if (xhr.status === 200) {
     obj.success(xhr.responseText); //返回值傳callback
    } else {
     //failcallback
     obj.error('There was a problem with the request.');
    }
   } else {
    console.log('still not ready...');
   }
  };
  xhr.open(obj.method, obj.url, true);
  // 設置 Content-Type 為 application/x-www-form-urlencoded
  // 以表單的形式傳遞數據
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(util(obj.data));//處理body數據
 }

//處理數據
 const util = (obj)=>{
 var str = ''
 for (key in obj){
  str += key +'='+obj[key]+'&'
  }
  return str.substring(0,str.length-1)
 }    
}

封裝完成，開始使用的時候你會發現，body和header處理得有些亂，還有回調地獄的問題，所以我們出現了新的 fetch 請求技術。

1.2、fetch

fetch 首先解決了回調地獄的問題，他返回的結果是一個 Promise 對象，對 Promise 不熟的可點擊《Promise詳解》。

fetch 使用如下：

fetch(url,options).then(response=>{
// handle HTTP response
},error=>{
// handle network error
})

fetch 發送網絡請求時，可以傳輸任意數據格式，非常簡便。但是 fetch 的超時、終止取消並不方便，只能通過取消 Promise 來完成，如果有多個 fetch 請求時，更難處理。除此之外，fetch 是比較新的技術，低版本瀏覽器和IE瀏覽器支持性不好。

1.3、axios

axios 功能非常強大，包括 取消請求，超時處理，進度處理等等。但它的本質還是 ajax，基於 Promise 進行封裝，既解決回調地獄問題，又能很好地支持各個瀏覽器。

axios使用代碼如下：

axios.post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

二、ajax、fetch、axios的優缺點

2.1、ajax 的優缺點：

• 屬 js 原生，基於XHR進行開發，XHR 結構不清晰。
• 針對 mvc 編程，由於近來vue和React的興起，不符合mvvm前端開發流程。
• 單純使用 ajax 封裝，核心是使用 XMLHttpRequest 對象,使用較多並有先后順序的話，容易產生回調地獄。

2.2、fetch 的優缺點：

• 屬於原生 js，脫離了xhr ,號稱可以替代 ajax技術。
• 基於 Promise 對象設計的，可以解決回調地獄問題。
• 提供了豐富的 API，使用結構簡單。
• 默認不帶cookie，使用時需要設置。
• 沒有辦法檢測請求的進度，無法取消或超時處理。
• 返回結果是 Promise 對象，獲取結果有多種方法，數據類型有對應的獲取方法，封裝時需要分別處理，易出錯。
• 瀏覽器支持性比較差。

2.3、axios的優缺點：

• 在瀏覽器中創建XMLHttpRequest請求，在node.js中創建http請求。
• 解決回調地獄問題。
• 自動轉化為json數據類型。
• 支持Promise技術，提供並發請求接口。
• 可以通過網絡請求檢測進度。
• 提供超時處理。
• 瀏覽器兼容性良好。
• 有攔截器，可以對請求和響應統一處理。