1.jQuery ajax
Traditioneel Ajax verwijst naar XMLHttpRequest(XHR), de vroegste back-end request-technologie die in de originele js verscheen, en de kern gebruikt het XMLHttpRequest-object.
JQuery ajax is een encapsulation van native XHR en voegt ondersteuning toe voor JSONP. Na jaren van updates en onderhoud is het echt erg handig, en de voordelen hoeven niet genoemd te worden; Als je per se een paar tekortkomingen wilt noemen, kan het alleen zijn:
1. Het is programmering voor MVC, die niet voldoet aan de huidige golf van front-end MVVM
2. Op basis van native XHR-ontwikkeling is de architectuur van XHR zelf niet duidelijk.
3. Het hele JQuery-project is te groot, en het is zeer onredelijk om de hele JQuery alleen met ajax te introduceren (door een gepersonaliseerde verpakkingsoplossing te gebruiken en geen gebruik te maken van CDN-diensten)
4. Het voldoet niet aan het principe van scheiding van belangen
5. De configuratie en aanroep zijn erg verwarrend, en het event-based asynchrone model is niet vriendelijk.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Zoals te zien is in de volgende figuur:
2.axios
Na Vue2.0 adviseerde You Yuxi om JQuery ajax te vervangen door axios, wat waarschijnlijk de aandacht van veel mensen heeft doen opvallen.
axios is een HTTP-client gebaseerd op promises for browsers en nodejs, wat in wezen een encapsulatie is van native XHR, behalve dat het een implementatie van promises is die voldoet aan de nieuwste ES-specificaties, en het zelf de volgende kenmerken heeft:
1. Maak een XMLHttpRequest aan vanuit je browser
2. Ondersteun de Promise API
3. Klantondersteuning voorkomt CSRF
4. Enkele interfaces bieden voor gelijktijdige verzoeken (belangrijke, veel handiger werking)
5. Maak een HTTP-verzoek aan van node.js
6. Onderscheppingsverzoeken en -antwoorden
7. Transformeer verzoek- en responsgegevens
8. Intrekking van het verzoek
9. Automatisch JSON-data converteren
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. ophalen
Fetch wordt gepresenteerd als een alternatief voor AJAX, dat verscheen in ES6 en het promise-object in ES6 gebruikt. Fetch is ontworpen op basis van beloften. De codestructuur van Fetch is veel eenvoudiger dan die van ajax, en de parameters lijken een beetje op jQuery ajax. Onthoud echter dat je het niet kunt vergetenFetch is geen verdere encapsulatie van ajax, maar native JS en gebruikt het XMLHttpRequest-object niet。
Voordelen van fetch:
1. Voldoen aan focus-scheiding en meng geen inputs, outputs en toestanden die door gebeurtenissen in één object worden gevolgd
2. Betere en handigere manier om te schrijven
Eerlijk gezegd overtuigen de bovenstaande redenen mij helemaal niet, omdat zowel Jquery als Axios ons hebben geholpen xhr goed genoeg in te kapslen en makkelijk te gebruiken zijn, waarom moeten we dan nog steeds zoveel moeite steken om fetch te leren?
Ik denk dat de belangrijkste voordelen van fetch zijn:
1. De syntaxis is beknopt en meer semantisch
2. Op basis van standaard belofte-implementatie, ondersteuning voor async/await
3. Isomorf gemak, met gebruik van [isomorf-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Meer bottom-level, met rijke API's (verzoek, respons)
5. Het losmaken van XHR is een nieuwe implementatie in de ES-specificatie
fetch is een low-level API die je kunt zien als een native XHR, dus het is niet zo comfortabel te gebruiken en moet worden ingekapseld.
Bijvoorbeeld:
1) fetch rapporteert alleen fouten bij netwerkverzoeken, en behandelt 400 en 500 als succesvolle verzoeken, en de server weigert niet bij het teruggeven van 400 of 500 foutcodes.
2) fetch bevat standaard geen cookies, je moet een configuratie-item toevoegen: fetch(url, {credentials: 'include'})
3) fetch ondersteunt geen abort, ondersteunt geen time-out control, en de timeout-controle geïmplementeerd door setTimeout en Promise.reject kan niet voorkomen dat het verzoekproces op de achtergrond blijft draaien, wat resulteert in verspild verkeer
4) fetch heeft geen manier om de voortgang van verzoeken native te monitoren, terwijl XHR dat wel kan
|
Geplaatst op 16-05-2019 13:28:28
|
|
|
|
Geplaatst op 17-05-2019 18:16:39
|
Huisbaas