24.05.2020 – Der Unterschied zwischen Ajax, Axios und Fetch

1. jquery ajax

   $.ajax({   type: 'POST',   url: url,   data: data,   dataType: dataType,   success: function () {},   error: function () {}});<br>

Traditionelles Ajax bezieht sich auf XMLHttpRequest (XHR), die früheste Back-End-Anfragetechnologie, die zum ursprünglichen js gehörte, und den Kern verwendet das XMLHttpRequest-Objekt. Wenn zwischen mehreren Anforderungen eine Sequenzbeziehung besteht, kommt es zur Rückrufhölle.

JQuery Ajax ist eine Kapselung von nativem XHR. Darüber hinaus bietet es auch Unterstützung für JSONP. Nach Jahren der Aktualisierung und Wartung ist es natürlich sehr praktisch, die Vorteile aufzuzählen:
Es ist für die MVC-Programmierung konzipiert und entspricht nicht den aktuelles Frontend. Die Welle von MVVM
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, die gesamte JQuery einzuführen, wenn Sie Ajax allein verwenden (Sie können keine CDN-Dienste nutzen, wenn Sie eine personalisierte Verpackungslösung übernehmen)
Es entspricht nicht den Anforderungen mit der Trennung von Bedenken (Trennung von Bedenken)
5. Die Konfigurations- und Aufrufmethoden sind sehr verwirrend und das ereignisbasierte asynchrone Modell ist unfreundlich.

PS: MVVM (Model-View-ViewModel), abgeleitet vom klassischen Model-View-Controller (MVC)-Muster. Das Aufkommen von MVVM fördert die Trennung der GUI-Front-End-Entwicklung und der Back-End-Geschäftslogik und verbessert so die Effizienz der Front-End-Entwicklung erheblich. Der Kern von MVVM ist die ViewModel-Schicht, die wie eine Übertragungsstation (Wertkonverter) für die Konvertierung der Datenobjekte im Modell verantwortlich ist, um die Verwaltung und Verwendung der Daten zu erleichtern. Diese Schicht führt eine bidirektionale Datenbindung nach oben durch Ansichtsschicht und Die untere Schicht interagiert mit der Modellschicht über Schnittstellenanforderungen für Daten, die als Verbindung zwischen der oberen und der unteren Schicht dienen. Die Ansichtsebene zeigt nicht die Daten der Modellebene an, sondern die Daten des ViewModels. Dadurch werden die Ansichtsebene und die Modellebene vollständig entkoppelt und Backends Der wichtigste Teil der Umsetzung des Plans.

2. Axios

axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }}).then(function (response) { console.log(response); }).catch(function (error) { console.log(error);});<code>    axios({    method: 'post',    url: '/user/12345',    data: {        firstName: 'Fred',        lastName: 'Flintstone'    }}).then(function (response) {    console.log(response);}).catch(function (error) {    console.log(error);});<br>

Nach Vue2.0 empfiehlt You Yuxi jedem, Axios zu verwenden, um JQuery Ajax zu ersetzen. Vermutlich lassen Axios in die Augen vieler Menschen dringen.
axios ist ein Promise-basierter HTTP-Client für Browser und Nodejs. Es handelt sich im Wesentlichen um eine Kapselung von nativem XHR, mit der Ausnahme, dass es sich um eine Implementierungsversion von Promise handelt und die folgenden Eigenschaften aufweist:
1. XMLHttpRequest über den Browser erstellen
3. Der Client unterstützt die Verhinderung gleichzeitiger Anfragen (wichtig, erleichtert viele Vorgänge)
http-Anfrage von node.js
6. Anfrage und Antwort konvertieren
8. JSON-Daten automatisch konvertieren

CSRF verhindern: Jede Ihrer Anfragen enthält einen Schlüssel, der aus dem Cookie stammt. Gemäß der Same-Origin-Richtlinie des Browsers kann die gefälschte Website den Schlüssel nicht aus Ihrem Cookie erhalten. Auf diese Weise können Sie leicht erkennen, ob die Anfrage irreführend ist Eingaben eines Benutzers auf einer gefälschten Website, damit Sie die richtige Strategie wählen können.

3. Abruf

try { let Response = waiting fetch(url); let data = Response.json(); console.log(data);} Catch(e) { console.log("Ups, error", e);}

Fetch ist als Ersatz für AJAX bekannt. Es erschien in ES6 und verwendet das Promise-Objekt in ES6. Fetch basiert auf Versprechen. Die Codestruktur von Fetch ist viel einfacher als die von Ajax und die Parameter ähneln ein wenig denen von jQuery-Ajax. Sie müssen jedoch bedenken, dass fetch keine weitere Kapselung von Ajax ist, sondern natives js, das das XMLHttpRequest-Objekt nicht verwendet.

Vorteile von Fetch:    try {  let response = await fetch(url);  let data = response.json();  console.log(data);} catch(e) {  console.log("Oops, error", e);}<br>1. Es entspricht der Trennung von Belangen und vermischt Eingabe, Ausgabe und Status nicht in einem Objekt.

2. Besseres und bequemeres Schreiben.

, Die oben genannten Gründe überzeugen mich überhaupt nicht, da uns sowohl Jquery als auch Axios dabei geholfen haben, xhr gut genug zu kapseln und es bequem genug zu verwenden ist. Warum müssen wir immer noch viel Mühe aufwenden, um das Abrufen zu lernen?
Ich denke, die Hauptvorteile von fetch sind:

1. Einfache Syntax, semantischer 2. Basierend auf der Standard-Promise-Implementierung, die asynchron/await3 unterstützt, verwenden Sie [isomorphic-fetch](https ://github.com/matthew-andrews/isomorphic-fetch) 4. Es ist eine niedrigere Ebene und bietet umfangreiche APIs (Anfrage, Antwort). 5. Es ist von XHR getrennt und eine neue Implementierungsmethode in der ES-Spezifikation

Das obige ist der detaillierte Inhalt von24.05.2020 – Der Unterschied zwischen Ajax, Axios und Fetch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!