[[421376]]

一、ajax、fetch 和 axios 簡介

1.1、ajax

ajax是最早出現(xiàn)發(fā)送后端請求的技術(shù)，屬于原生 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); 
  // 設(shè)置 Content-Type 為 application/x-www-form-urlencoded 
  // 以表單的形式傳遞數(shù)據(jù) 
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
  xhr.send(util(obj.data));//處理body數(shù)據(jù) 
 } 
  
 //處理數(shù)據(jù) 
 const util = (obj)=>{ 
 var str = '' 
 for (key in obj){ 
  str += key +'='+obj[key]+'&' 
  } 
  return str.substring(0,str.length-1) 
 }     
} 

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

1.2、fetch

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

fetch 使用如下：

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

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

1.3、axios

axios 功能非常強(qiáng)大，包括 取消請求，超時處理，進(jìn)度處理等等。但它的本質(zhì)還是 ajax，基于 Promise 進(jìn)行封裝，既解決回調(diào)地獄問題，又能很好地支持各個瀏覽器。

axios使用代碼如下：

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

二、ajax、fetch、axios的優(yōu)缺點

2.1、ajax 的優(yōu)缺點：

• 屬 js 原生，基于XHR進(jìn)行開發(fā)，XHR 結(jié)構(gòu)不清晰。
• 針對 mvc 編程，由于近來vue和React的興起，不符合mvvm前端開發(fā)流程。
• 單純使用 ajax 封裝，核心是使用 XMLHttpRequest 對象,使用較多并有先后順序的話，容易產(chǎn)生回調(diào)地獄。

2.2、fetch 的優(yōu)缺點：

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

2.3、axios的優(yōu)缺點：

• 在瀏覽器中創(chuàng)建XMLHttpRequest請求，在node.js中創(chuàng)建http請求。
• 解決回調(diào)地獄問題。
• 自動轉(zhuǎn)化為json數(shù)據(jù)類型。
• 支持Promise技術(shù)，提供并發(fā)請求接口。
• 可以通過網(wǎng)絡(luò)請求檢測進(jìn)度。
• 提供超時處理。
• 瀏覽器兼容性良好。
• 有攔截器，可以對請求和響應(yīng)統(tǒng)一處理。