1.jQuery ajax
Traditionelles Ajax bezieht sich auf XMLHttpRequest(XHR), die früheste Backend-Request-Technologie, die im ursprünglichen JS auftauchte, und der Kern verwendet das XMLHttpRequest-Objekt.
JQuery ajax ist eine Kapselung von native XHR und bietet Unterstützung für JSONP. Nach Jahren der Aktualisierung und Wartung ist es wirklich sehr bequem, und die Vorteile müssen nicht erwähnt werden; Wenn Sie darauf bestehen, ein paar Schwächen aufzulisten, könnte es nur sein:
1. Es ist Programmierung für MVC, die nicht der aktuellen Welle von Frontend-MVVM entspricht
2. Basierend auf der nativen XHR-Entwicklung ist die Architektur von XHR selbst nicht klar.
3. Das gesamte JQuery-Projekt ist zu groß, und es ist sehr unvernünftig, das gesamte JQuery ausschließlich mit Ajax einzuführen (mit einer personalisierten Verpackungslösung und ohne Zugang zu CDN-Diensten)
4. Sie entspricht nicht dem Prinzip der Trennung der Anliegen
5. Die Konfiguration und Invocation sind sehr verwirrend, und das ereignisbasierte asynchrone Modell ist nicht freundlich.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Wie in der folgenden Abbildung dargestellt:
2. Axios
Nach Vue2.0 empfahl You Yuxi, JQuery Ajax durch Axios zu ersetzen, was wohl Axios in die Augen vieler Menschen gelockt hat.
Axios ist ein HTTP-Client, der auf Promises for Browser und NodeJS basiert und im Wesentlichen eine Kapselung von native XHR darstellt, mit der Ausnahme, dass es sich um eine Implementierung von Promises handelt, die den neuesten ES-Spezifikationen entspricht, und selbst folgende Eigenschaften aufweist:
1. Erstellen Sie eine XMLHttpRequest aus Ihrem Browser
2. Support Promise API
3. Kundensupport verhindert CSRF
4. Bereitstellung einiger Schnittstellen für gleichzeitige Anfragen (wichtiger, viel bequemerer Betrieb)
5. Eine HTTP-Anfrage von node.js erstellen
6. Abfanganfragen und -antworten
7. Transformieren Sie Anfrage- und Antwortdaten
8. Aufhebung des Antrags
9. Automatische Konvertierung von JSON-Daten
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3. holen
Fetch wird als Alternative zu AJAX beworben, das in ES6 erschien und das Promise-Objekt in ES6 verwendet. Fetch basiert auf Versprechen. Die Codestruktur von Fetch ist viel einfacher als die von Ajax, und die Parameter ähneln ein wenig jQuery-Ajax. Denken Sie jedoch unbedingt daranFetch ist keine weitere Kapselung von Ajax, sondern native JS und verwendet nicht das XMLHttpRequest-Objekt。
Vorteile von Fetch:
1. Halte dich an die Fokustrennung und vermische keine Eingaben, Ausgaben und Zustände, die durch Ereignisse in einem Objekt verfolgt werden
2. Bessere und bequemere Art zu schreiben
Ehrlich gesagt überzeugen mich die oben genannten Gründe überhaupt nicht, weil sowohl Jquery als auch Axios uns geholfen haben, xhr gut genug zu kapseln und einfach zu bedienen sind – warum müssen wir trotzdem so viel Aufwand investieren, um Fetch zu lernen?
Ich denke, die Hauptvorteile von Apportieren sind:
1. Die Syntax ist prägnant und semantischer
2. Basierend auf der Standard-Promise-Implementierung, Unterstützung für Async/Await
3. Isomorphe Bequemlichkeit, unter Verwendung von [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Mehr Bottom-Level, mit reichhaltigen APIs (Anfrage, Antwort)
5. Die Abspaltung von XHR ist eine neue Implementierung in der ES-Spezifikation
Fetch ist eine Low-Level-API, die man als native XHR betrachten kann, daher ist sie nicht besonders angenehm zu verwenden und muss gekapselt sein.
Zum Beispiel:
1) Fetch meldet nur Fehler bei Netzwerkanfragen und behandelt 400 und 500 als erfolgreiche Anfragen, und der Server lehnt nicht ab, wenn er 400 oder 500 Fehlercodes zurückgibt.
2) fetch enthält standardmäßig keine Cookies, du musst ein Konfigurationselement hinzufügen: fetch(URL, {credentials: 'include'})
3) Fetch unterstützt kein Abbruch, keine Timeout-Kontrolle, und die von setTimeout und Promise.reject implementierte Timeout-Steuerung kann nicht verhindern, dass der Anforderungsprozess im Hintergrund weiterläuft, was zu verschwendungem Datenverkehr führt
4) Fetch hat keine Möglichkeit, den Fortschritt von Anfragen nativ zu überwachen, während XHR dies kann
|
Veröffentlicht am 16.05.2019 13:28:28
|
|
|
|
Veröffentlicht am 17.05.2019 18:16:39
|
Vermieter|
Veröffentlicht am 20.02.2025 10:08:01
|
