ajax、axios和fetch的區別

1、jquery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

傳統 Ajax 指的是 XMLHttpRequest（XHR），最早出現的發送后端請求技術，隸屬于原始js中，核心使用XMLHttpRequest對象，多個請求之間如果有先后關系的話，就會出現回調地獄。
JQuery ajax 是對原生XHR的封裝，除此以外還增添了對JSONP的支持。經過多年的更新維護，真的已經是非常的方便了，優點無需多言；如果是硬要舉出幾個缺點，那可能只有：
1.本身是針對MVC的編程,不符合現在前端MVVM的浪潮
2.基于原生的XHR開發，XHR本身的架構不清晰。
3.JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）
4.不符合關注分離（Separation of Concerns）的原則
5.配置和調用方式非常混亂，而且基于事件的異步模型不友好。
PS:MVVM(Model-View-ViewModel), 源自于經典的 Model–View–Controller（MVC）模式。MVVM 的出現促進了 GUI 前端開發與后端業務邏輯的分離，極大地提高了前端開發效率。MVVM 的核心是 ViewModel 層，它就像是一個中轉站（value converter），負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，該層向上與視圖層進行雙向數據綁定，向下與 Model 層通過接口請求進行數據交互，起呈上啟下作用。View 層展現的不是 Model 層的數據，而是 ViewModel 的數據，由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關重要的，它是前后端分離方案實施的最重要一環。

如下圖所示：

2、axios

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

Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax，想必讓axios進入了很多人的目光中。
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范，它本身具有以下特征：
1.從瀏覽器中創建 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些并發請求的接口（重要，方便了很多的操作）
5.從 node.js 創建 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據
PS:防止CSRF:就是讓你的每個請求都帶一個從cookie中拿到的key, 根據瀏覽器同源策略，假冒的網站是拿不到你cookie中得key的，這樣，后臺就可以輕松辨別出這個請求是否是用戶在假冒網站上的誤導輸入，從而采取正確的策略。

3、fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基于promise設計的。Fetch的代碼結構比起ajax簡單多了，參數有點像jQuery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
fetch的優點：
1.符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象里
2.更好更方便的寫法
坦白說，上面的理由對我來說完全沒有什么說服力，因為不管是Jquery還是Axios都已經幫我們把xhr封裝的足夠好，使用起來也足夠方便，為什么我們還要花費大力氣去學習fetch？
我認為fetch的優勢主要優勢就是：

1.  語法簡潔，更加語義化
2.  基于標準 Promise 實現，支持 async/await
3.  同構方便，使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4.更加底層，提供的API豐富（request, response）
5.脫離了XHR，是ES規范里新的實現方式

最近在使用fetch的時候，也遇到了不少的問題：
fetch是一個低層次的API，你可以把它考慮成原生的XHR，所以使用起來并不是那么舒服，需要進行封裝。
例如：

1）fetch只對網絡請求報錯，對400，500都當做成功的請求，服務器返回 400，500 錯誤碼時并不會 reject，只有網絡錯誤這些導致請求不能完成時，fetch 才會被 reject。
2）fetch默認不會帶cookie，需要添加配置項： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制并不能阻止請求過程繼續在后臺運行，造成了流量的浪費
4）fetch沒有辦法原生監測請求的進度，而XHR可以

總結：axios既提供了并發的封裝，也沒有fetch的各種問題，而且體積也較小，當之無愧現在最應該選用的請求的方式。


轉自：https://www.jianshu.com/p/8bc48f8fde75

posted @ 2020-07-03 10:31 pretty.sunshine Views(349) Comments(0) 收藏舉報

刷新頁面返回頂部

pretty.sunshine

ajax、axios和fetch的區別

公告