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的各種問題,而且體積也較小,當之無愧現在最應該選用的請求的方式。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249834.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249834.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249834.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

函數函數sigaction、signal

函數函數sigaction 1. 函數sigaction原型: int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 分析: 參數 signum :要捕獲的信號。參數act:truct sigaction 結構體,后面具體講解傳入…

使用SQL Server連接xml接口,讀取并解析數據

--數據源格式&#xff0c;放到任意程序中部署接口即可--<Data xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd"http://www.w3.org/2001/XMLSchema"> --<Peoples> --<People> --<Name>張三</Name> --<S…

mac 卸載編輯器卸不干凈

Configuration~/Library/Preferences/Caches~/Library/Caches/Plugins~/Library/Application Support/Logs~/Library/Logs/轉載于:https://www.cnblogs.com/smzd/p/10114540.html

vue中使用axios最詳細教程

前提條件&#xff1a;vue-cli 項目 安裝&#xff1a; npm npm 在main.js導入&#xff1a; // 引入axios&#xff0c;并加到原型鏈中 import axios from axios; Vue.prototype.$axios axios; import QS from qs Vue.prototype.qs QS;封裝好的axios,拿走不送&#xff1a;&am…

Java 類型轉換String,List,Map,Array

1. JsonString轉為Map String jsoNStr "{\n" "\t\"TestArray\": [\"1\", \"2\", \"3\"]\n" "}";Map map JSON.parseObject(jsoNStr,Map.class);2.Object轉為JsonArray(得保證obj是個Array數組&#x…

關于固件

固件(Firmware)就是寫入EROM或EPROM(可編程只讀存儲器)中的程序&#xff0c;通俗的理解就是“固化的軟件”&#xff0c;臺港澳稱為“韌體”。更簡單的說&#xff0c;固件就是BIOS的軟件&#xff0c;但又與普通軟件完全不同&#xff0c;它是固化在集成電路內部的程序代碼&#x…

React-Native 指定模擬器RUN-IOS

react-native run-ios --simulator "iPhone 7” 轉載于:https://www.cnblogs.com/smzd/p/10185263.html

vue和element-ui使用

上一篇已經創建好一個vue項目。https://mp.csdn.net/postedit/80926242 這一篇主要是創建一個vue項目并結合餓了么框架element-ui。 1.先創建vue項目&#xff0c;我準備把項目放在e盤下&#xff1a;E:\Work\RegisterProject&#xff1b; 命令行進入這個目錄&#xff1a; 創…

javaweb學習6——自定義標簽

聲明&#xff1a;本文只是自學過程中&#xff0c;記錄自己不會的知識點的摘要&#xff0c;如果想詳細學習JavaWeb&#xff0c;請到孤傲蒼狼博客學習&#xff0c;JavaWeb學習點此跳轉 本文鏈接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…

goland 實用鍵

代碼補全 option command v轉載于:https://www.cnblogs.com/smzd/p/10313417.html

關于Mysql java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)的問題...

問題所在&#xff1a; 1.連接數據庫一個是密碼是否正確&#xff0c; 2.driver是否對&#xff0c; 3.有么有jar包沖突&#xff0c;轉載于:https://www.cnblogs.com/java-123/p/9403412.html

vscode配置vue環境

一、安裝VSCode、NodeJS VSCode&#xff1a;https://code.visualstudio.com/ NodeJS&#xff1a;https://nodejs.org/en/ 二、打開VSCode&#xff0c;安裝常用插件 如圖所示&#xff08;安裝后重新加載即可&#xff09;: 三、項目中添加.vscode文件夾&#xff0c;文件夾中添…

秒殺核心設計(減庫存部分)-防超賣與高并發

商品詳情頁面的靜態化&#xff0c;varnish加速&#xff0c;秒殺商品庫獨立部署服務器這種就略過不講了。只討論庫存部分的優化 mysql配置層面的優化可以參考我的這篇文章 《關于mysql innodb引擎性能優化的一點心得》 重點設計在數據庫層面。 2張表&#xff1a; 第一張&#xf…

go strconv

strconv是golang用來做數據類型轉換的一個庫。 介紹下strconv最常用的兩個方法, 沒有解釋語言那么自在可以str(int),int(string), 那還算簡練。 num, err : strconv.Atoi("-42") str : strconv.Itoa(-42)轉換換成bool類型. b, err : strconv.ParseBool("true&qu…

django配置templates、static、media和連接mysql數據庫

1.模板文件 # templates配置 if os.path.exists(os.path.join(BASE_DIR, templates)) is False:os.mkdir(os.path.join(BASE_DIR, templates)) TEMPLATES [{# 模板引擎&#xff0c;內置的模板引擎有&#xff1a;# 1. django.template.backends.django.DjangoTemplates# 2. dj…

vue調用順序(初學版) index.html → main.js → app.vue → index.js → components/組件 測試

關于它是怎么調用運作的&#xff1a;https://mp.csdn.net/postedit/86134414 一. 準備工作&#xff1a; 1.下載webstorm&#xff0c;安裝vue。 2.創建項目&#xff0c;cd到要放項目的文件夾下 vue init webpack vue_test 3.安裝各種包 npm install 4.運行 cd vue_test …

web開發:jquery之DOM

一、文檔結構 二、文檔操作 三、文檔操作案例 四、form表單 五、正則 六、form案例 一、文檔結構 jsvar $sup $(.sup);console.log($sup.children()); // 子們console.log($sup.parent()); // 父console.log($sup.prev()); // 上兄弟console.log($sup.next()); // 下兄弟c…

NO.8:自學python之路------并行socket網絡編程

摘要 一到放假就雜事很多&#xff0c;這次的作業比較復雜&#xff0c;做了一個周&#xff0c;進度又拖了。不過結果還不錯。 正文 粘包 在上一節中&#xff0c;如果連續發送過多數據&#xff0c;就可能發生粘包。粘包就是兩次發送的數據粘在一起被接收&#xff0c;損壞了數據的…

vue項目中主要文件的加載順序(index.html、App.vue、main.js)

先后順序&#xff1a; index.html > App.vue的export外的js代碼 > main.js > App.vue的export里面的js代碼 > Index.vue的export外的js代碼 測試的頁面代碼塊&#xff1a; 文件的加載先后順序&#xff1a; Index.vue的mounted()中的輸出沒有執行。why&#…

Http請求報頭設置(C#)

1、添加一個SetHeaderValue方法&#xff1a; public static void SetHeaderValue(WebHeaderCollection header, string name, string value) { var property typeof(WebHeaderCollection).GetProperty("InnerCollection",BindingFlags.Instance | BindingFlags.NonP…