1.jQuery ajax
Tradicionalni Ajax se nanaša na XMLHttpRequest(XHR), najzgodnejšo tehnologijo za zahteve v ozadju, ki se je pojavila v izvirnem js, jedro pa uporablja objekt XMLHttpRequest.
JQuery ajax je enkapsulacija izvornega XHR in dodaja podporo za JSONP. Po letih posodobitev in vzdrževanja je res zelo priročno, prednosti pa ni treba posebej poudarjati; Če vztrajate pri navajanju nekaj pomanjkljivosti, so to lahko le:
1. Gre za programiranje za MVC, ki ne ustreza trenutnemu valu front-end MVVM
2. Na podlagi nativnega razvoja XHR arhitektura XHR ni jasna.
3. Celoten projekt JQuery je prevelik in zelo nerazumno je uvesti celoten JQuery samo z Ajaxom (sprejeti personalizirano embalažo in ne uživati v CDN storitvah)
4. Ne ustreza načelu ločevanja skrbi
5. Konfiguracija in klic sta zelo zmedeni, asinhroni model, ki temelji na dogodkih, pa ni prijazen.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Kot je prikazano na naslednji sliki:
2.axios
Po Vue2.0 je You Yuxi priporočil, da zamenjate JQuery ajax z axios, kar je verjetno povzročilo, da so axios pritegnili v oči mnogih ljudi.
axios je HTTP odjemalec, ki temelji na obljubah za brskalnike in nodejs, kar je v bistvu enkapsulacija nativnega XHR, le da je implementacija obljub, ki ustreza najnovejšim specifikacijam ES, sam pa ima naslednje značilnosti:
1. Ustvarite XMLHttpRequest iz vašega brskalnika
2. Podprite Promise API
3. Podpora strankam preprečuje CSRF
4. Zagotoviti nekaj vmesnikov za sočasne zahteve (pomembno, veliko bolj priročno delovanje)
5. Ustvarite HTTP zahtevo iz node.js
6. Zahteve in odgovori za prestrezanje
7. Pretvorba podatkov o zahtevah in odgovorih
8. Preklic zahteve
9. Samodejno pretvori JSON podatke
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. prinašanje
Fetch je predstavljen kot alternativa AJAX-u, ki se je pojavil v ES6 in uporablja objekt obljube v ES6. Prinašanje je zasnovano na obljubah. Struktura kode v Fetchu je veliko enostavnejša kot pri ajaxu, parametri pa so nekoliko podobni jQuery ajaxu. Vendar pa ne pozabitefetch ni nadaljnja enkapsulacija ajax-a, temveč nativni js in ne uporablja objekta XMLHttpRequest。
Prednosti prinašanja:
1. Upoštevajte ločevanje fokusa in ne mešajte vhodov, izhodov in stanj, ki jih spremljajo dogodki v enem objektu
2. Boljši in bolj priročen način pisanja
Iskreno, zgornji razlogi me sploh ne prepričajo, saj sta nam tako Jquery kot Axios pomagala dovolj dobro enkapsulirati xhr in sta dovolj enostavna za uporabo, zakaj pa moramo še vedno vložiti toliko truda v učenje prinašanja?
Mislim, da so glavne prednosti prinašanja naslednje:
1. Sintaksa je jedrnata in bolj semantična
2. Na podlagi standardne implementacije Promise podpira async/await
3. Izomorfna priročnost, z uporabo [izomorfno-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Bolj na nižji ravni, zagotavljanje bogatih API-jev (zahteva, odgovor)
5. Odmik od XHR je nova implementacija v specifikaciji ES
fetch je nizkonivojski API, ki ga lahko razumete kot nativni XHR, zato ni ravno udoben za uporabo in ga je treba enkapsulirati.
Na primer:
1) Fetch poroča le o napakah za omrežne zahteve in obravnava 400 in 500 kot uspešne zahteve, strežnik pa ne zavrne, ko vrne kode napak 400 ali 500.
2) fetch privzeto ne prenaša piškotkov, dodati morate konfiguracijski element: fetch(url, {credentials: 'include'})
3) pridobivanje ne podpira prekinitve, ne podpira nadzora časovne omejitve, in nadzor časovne omejitve, ki ga izvajata setTimeout in Promise.reject ne more preprečiti, da bi postopek zahtevka še naprej tekel v ozadju, kar povzroča izgubo prometa
4) pridobivanje nima načina, da bi nativno spremljalo napredka zahtev, medtem ko XHR lahko
|
Objavljeno na 16. 05. 2019 13:28:28
|
|
|
|
Objavljeno na 17. 05. 2019 18:16:39
|
Najemodajalec