Šis raksts ir mašīntulkošanas spoguļraksts, lūdzu, noklikšķiniet šeit, lai pārietu uz oriģinālo rakstu.

Skats: 11130|Atbildi: 2

[JavaScript] Atšķirība starp ajax un axios un fetch

[Kopēt saiti]
Publicēts 16.05.2019 13:28:28 | | | |
1.jQuery ajax

Tradicionālais Ajax attiecas uz XMLHttpRequest(XHR), agrāko aizmugures pieprasījumu tehnoloģiju, kas parādījās oriģinālajā js, un kodols izmanto XMLHttpRequest objektu.

JQuery ajax ir vietējā XHR iekapsulēšana un pievieno JSONP atbalstu. Pēc gadiem ilgas atjaunināšanas un uzturēšanas tas patiešām ir ļoti ērti, un priekšrocības nav jāsaka; Ja jūs uzstājat uzskaitīt dažus trūkumus, tas var būt tikai:

1. Tā ir MVC programmēšana, kas neatbilst pašreizējam front-end MVVM vilnim
2. Pamatojoties uz vietējo XHR attīstību, pati XHR arhitektūra nav skaidra.
3. Viss JQuery projekts ir pārāk liels, un ir ļoti nesaprātīgi ieviest visu JQuery, izmantojot tikai ajax (pieņemot personalizētu iepakojuma risinājumu un nebaudot CDN pakalpojumus)
4. Tas neatbilst bažu nošķiršanas principam
5. Konfigurācija un izsaukšana ir ļoti mulsinoši, un uz notikumiem balstītais asinhronais modelis nav draudzīgs.

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

Kā parādīts nākamajā attēlā:




2.AXIOS

Pēc Vue2.0 You Yuxi ieteica aizstāt JQuery ajax ar axios, kas noteikti lika axios iekļūt daudzu cilvēku acīs.

axios ir HTTP klients, kas balstīts uz solījumiem pārlūkprogrammām un nodejs, kas būtībā ir vietējā XHR iekapsulēšana, izņemot to, ka tā ir solījumu ieviešana, kas atbilst jaunākajām ES specifikācijām, un tai pašai ir šādas īpašības:

1. Izveidojiet XMLHttpRequest no pārlūkprogrammas
2. Atbalsta solījuma API
3. Klientu atbalsts novērš CSRF
4. Nodrošiniet dažas saskarnes vienlaicīgiem pieprasījumiem (svarīgi, daudz ērtāka darbība)
5. HTTP pieprasījuma izveide no node.js
6. Pārtveriet pieprasījumus un atbildes
7. Pārveidojiet pieprasījuma un atbildes datus
8. Pieprasījuma atcelšana
9. Automātiski konvertējiet JSON datus

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

3.Iegūt


Fetch tiek rēķināts kā alternatīva AJAX, kas parādījās ES6 un izmanto solījuma objektu ES6. Fetch ir izstrādāts, pamatojoties uz solījumiem. Fetch koda struktūra ir daudz vienkāršāka nekā ajax, un parametri ir nedaudz līdzīgi jQuery ajax. Tomēr noteikti atcerietiesfetch nav turpmāka ajax iekapsulēšana, bet gan vietējais js un neizmanto objektu XMLHttpRequest

Iegūšanas priekšrocības:

1. Ievērojiet fokusa atdalīšanu un nejauciet ieejas, izejas un stāvokļus, ko izseko notikumi vienā objektā
2. Labāks un ērtāks rakstīšanas veids
Atklāti sakot, iepriekš minētie iemesli mani vispār nepārliecina, jo gan Jquery, gan Axios ir palīdzējuši mums pietiekami labi iekapsulēt xhr un ir pietiekami viegli lietojami, kāpēc mums joprojām ir jātērē daudz pūļu, lai iemācītos paņemt?

Es domāju, ka galvenās fetch priekšrocības ir:


1. Sintakse ir kodolīga un semantiskāka
2. Pamatojoties uz standarta solījumu ieviešanu, atbalstiet asinhronu / gaidiet
3. Izomorfiskā ērtība, izmantojot [izomorfs-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Vairāk apakšējā līmeņa, nodrošinot bagātīgus API (pieprasījums, atbilde)
5. Atdalīšanās no XHR ir jauna ieviešana ES specifikācijā
Nesen, izmantojot fetch, esmu saskāries arī ar daudzām problēmām:
fetch ir zema līmeņa API, kuru varat uzskatīt par vietējo XHR, tāpēc tas nav tik ērti lietojams un ir jāiekapsulē.
Piemēram:


1) Fetch ziņo tikai par tīkla pieprasījumu kļūdām un uzskata 400 un 500 par veiksmīgiem pieprasījumiem, un serveris nenoraidīs, atgriežot 400 vai 500 kļūdu kodus.
2) Fetch pēc noklusējuma nesatur sīkfailus, jums jāpievieno konfigurācijas vienums: fetch(url, {credentials: 'include'})
3) fetch neatbalsta pārtraukšanu, neatbalsta taimauta kontroli, un taimauta kontrole, ko īsteno setTimeout un Promise.declinet, nevar novērst pieprasījuma procesa turpināšanu fonā, kā rezultātā tiek izšķērdēta datplūsma
4) fetch nav iespējas vietēji uzraudzīt pieprasījumu gaitu, bet XHR var
Kopsavilkums: Axios nodrošina vienlaicīgu iekapsulēšanu bez iegūšanas problēmām, un tas ir mazs izmērs, padarot to par vispiemērotāko pieprasījuma metodi tagad.




Iepriekšējo:Pure CSS3 izdaiļo radio pogas
Nākamo:Izpratne par BIO un NIO
Publicēts 17.05.2019 18:16:39 |
Iemācījies,
 Saimnieks| Publicēts 20.02.2025 10:08:01 |
Vietējais XMLHttpRequest pieprasījums

SAŅEMT






AMATS



Atruna:
Visa programmatūra, programmēšanas materiāli vai raksti, ko publicē Code Farmer Network, ir paredzēti tikai mācību un pētniecības mērķiem; Iepriekš minēto saturu nedrīkst izmantot komerciāliem vai nelikumīgiem mērķiem, pretējā gadījumā lietotājiem ir jāuzņemas visas sekas. Informācija šajā vietnē nāk no interneta, un autortiesību strīdiem nav nekāda sakara ar šo vietni. Iepriekš minētais saturs ir pilnībā jāizdzēš no datora 24 stundu laikā pēc lejupielādes. Ja jums patīk programma, lūdzu, atbalstiet oriģinālu programmatūru, iegādājieties reģistrāciju un iegūstiet labākus oriģinālus pakalpojumus. Ja ir kādi pārkāpumi, lūdzu, sazinieties ar mums pa e-pastu.

Mail To:help@itsvse.com