[[421376]]

一、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技術，提供并發請求接口。
• 可以通過網絡請求檢測進度。
• 提供超時處理。
• 瀏覽器兼容性良好。
• 有攔截器，可以對請求和響應統一處理。