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