2020-05-24——ajax和axios、fetch的區別

1、jquery ajax

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

傳統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',    method: 'post',    url: '/user/12345',    data: {        firstName: 'Fred',     . ponse); }).catch(function (error) {    console.log(error);});<br>

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);}<br>

###################################################################################。 #########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/await3.  同構方便，使用[isomorphic-fetch](https ://github.com/matthew-andrews/isomorphic-fetch)4.  更加底層，提供的API豐富（request, response）5.  脫離了XHR，是ES規範里新的實現方式######

以上是2020-05-24——ajax和axios、fetch的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！