Ez a cikk egy tükör gépi fordítás, kérjük, kattintson ide, hogy ugorjon az eredeti cikkre.

Nézet: 11130|Válasz: 2

[JavaScript] Az ajax és az axios és a fetch közötti különbség

[Linket másol]
Közzétéve 2019. 05. 16. 13:28:28 | | | |
1.jQuery ajax

A hagyományos Ajax az XMLHttpRequest(XHR) rendszerre utal, amely az eredeti js-ben megjelent legkorábbi háttérrendszer kéréstechnológiá, és a mag az XMLHttpRequest objektumot használja.

A JQuery ajax a natív XHR lekapzszulája, és támogatja a JSONP-t. Évek frissítése és karbantartása után valóban nagyon kényelmes, és az előnyeit nem kell mondani; Ha ragaszkodsz ahhoz, hogy felsorolj néhány hiányosságot, az csak az lehet:

1. Ez MVC-re programoz, amely nem felel meg a jelenlegi front-end MVVM hullámnak
2. A natív XHR fejlesztése alapján maga az XHR architektúrája nem világos.
3. Az egész JQuery projekt túl nagy, és nagyon ésszerűtlen az egész JQuery-t kizárólag ajax-szal bevezetni (személyre szabott csomagolási megoldást alkalmazva, nem élvezve a CDN szolgáltatásokat).
4. Nem felel meg az érdekek szétválasztásának elvének
5. A konfiguráció és az invocation nagyon zavaros, és az eseményalapú aszinkron modell nem barátságos.

PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。

Ahogy az alábbi ábrán látható:




2.axios

A Vue2.0 után You Yuxi azt javasolta, hogy cseréld le a JQuery ajaxot axios-szal, ami sokak szemébe jutott az axios-on.

Az axios egy HTTP kliens, amely böngészők és nodeJS ígéreteken alapul, lényegében a natív XHR kapszulája, kivéve, hogy a Promises megvalósítása, amely megfelel a legújabb ES specifikációknak, és maga is a következő jellemzőkkel rendelkezik:

1. Hozz létre XMLHttpRequestet a böngésződből
2. Support Promise API
3. Az ügyféltámogatás megakadályozza a CSRF-et
4. Biztosíts néhány interfészt az egyidejű kérésekhez (fontos, sokkal kényelmesebb üzemeltetés)
5. Hozz létre HTTP kérést a node.js
6. Kérések és válaszok elfogása
7. A kérés- és válaszadatok átalakítása
8. A kérelem törlése
9. Automatikus JSON adatok konvertálása

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。

3.hozd


A Fetch alternatívaként szerepel az ES6-ban megjelent AJAX-szal, és az ES6-ban a promise object-et használja. A Fetch ígéretekre épül. A Fetch kódstruktúrája sokkal egyszerűbb, mint az ajax-é, és a paraméterek kicsit hasonlítanak a jQuery ajax-hoz. Azonban ne felejtsd elA fetch nem az AJAX további kapszulája, hanem a natív JS, és nem használja az XMLHttpRequest objektumot

A hozás előnyei:

1. Tartsa be a fókusz szétválasztását, és ne keverje az események által követett bemeneteket, kimeneteket és állapotokat egyetlen objektumban
2. Jobb és kényelmesebb módja az írásnak
Őszintén szólva, a fentiek egyáltalán nem meggyőzőek számomra, mivel mind a Jquery, mind az Axios segített nekünk elég jól befoglalni az xhr-t, és elég könnyű használni, miért kell még mindig sok energiát fektetnünk a lehozás megtanulására?

Szerintem a fetch fő előnyei a következők:


1. A szintaxis tömör és szemantikusabb
2. A standard promise megvalósítás alapján szinkron/várakozás támogatása
3. Izomorf kényelmi megoldás, [isomorf-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Alsó szintűbb, gazdag API-kat biztosítva (kérés, válasz)
5. Az XHR-től való eltérés egy új megvalósítás az ES specifikációban
Mostanában a fetch használata közben is sok problémába ütköztem:
A fetch egy alacsony szintű API, amit natív XHR-ként is lehet értelmezni, így nem túl kényelmes használni, és be kell kapszulálni.
Például:


1) a Fetch csak hálózati kérésekhez ad jelentéseket, és a 400-as, illetve 500-as hibákat sikeres kérésként kezeli, és a szerver nem utasítja el, amikor 400 vagy 500 hibakódot ad vissza.
2) A fetch alapértelmezés szerint nem szállít cookie-kat, hozzáadnod kell egy konfigurációs elemet: fetch(url, {credentials: 'include'})
3) a fetch nem támogatja az abort-ot, nem támogatja az időtúlzás vezérlését, és a setTimeout és Promise.reject által implementált időkihallgatási vezérlés nem akadályozza meg, hogy a kérés folyamata háttérben folyjon, ami elpazarolt forgalmat eredményez
4) a fetch nem képes natívan figyelni a kérések előrehaladását, míg az XHR képes
Összefoglaló: Az Axios párhuzamos kapszulázást biztosít, a behozás problémái nélkül, és kicsi méretű, így ez a legmegfelelőbb kérési módszer most.




Előző:A tiszta CSS3 szebbé teszi a rádiógombokat
Következő:A BIO és a NIO megértése
Közzétéve 2019. 05. 17. 18:16:39 |
Tanultam,
 Háziúr| Közzétéve 2025. 02. 20. 10:08:01 |
Natív XMLHttpRequest kérés

KAP






POSTA



Lemondás:
A Code Farmer Network által közzétett összes szoftver, programozási anyag vagy cikk kizárólag tanulási és kutatási célokra szolgál; A fenti tartalmat nem szabad kereskedelmi vagy illegális célokra használni, különben a felhasználók viselik az összes következményet. Az oldalon található információk az internetről származnak, és a szerzői jogi vitáknak semmi köze ehhez az oldalhoz. A fenti tartalmat a letöltés után 24 órán belül teljesen törölni kell a számítógépéről. Ha tetszik a program, kérjük, támogassa a valódi szoftvert, vásároljon regisztrációt, és szerezzen jobb hiteles szolgáltatásokat. Ha bármilyen jogsértés történik, kérjük, vegye fel velünk a kapcsolatot e-mailben.

Mail To:help@itsvse.com