Eine kurze Einführung in $.ajax, axios und fetch (mit Code)

Dieser Artikel bietet Ihnen eine kurze Einführung in $.ajax, axios und fetch (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Was ist Ajax?

Antwort: Ajax ist eine Technologie, die eine asynchrone Datenübertragung (HTTP-Anfrage) zwischen dem Browser und dem Server nutzen kann. Damit kann eine Seite eine kleine Datenmenge anfordern, ohne die gesamte Seite aktualisieren zu müssen. Um einen Teil des Inhalts auf einer herkömmlichen Seite (ohne Verwendung von Ajax) zu aktualisieren, muss die gesamte Webseite neu geladen werden.

Worauf basiert Ajax?

Antwort: Es basiert auf XMLHttpRequest (XHR). Dabei handelt es sich um eine relativ grobe API, die nicht dem Designprinzip der Interessenstrennung (Separation of Concerns) entspricht und nicht so benutzerfreundlich zu konfigurieren und zu verwenden ist.

Der Hintergrund von $.ajax?

Antwort: Aus den oben genannten Gründen wird auf verschiedene Ajax-Bibliotheken verwiesen, die bekannteste ist jedoch $.ajax() in der jQuery-API. Einer der Vorteile von $.ajax() ist der asynchrone Betrieb, aber der asynchrone Betrieb von jQuery ist ein ereignisbasiertes asynchrones Modell, das nicht so benutzerfreundlich ist wie versprochen.

Der durch Abruf generierte Hintergrund?

Antwort: Basierend auf den verschiedenen oben genannten Faktoren entstand die Fetch-API. Aber es ist einfach zu bedienen und weist einige Probleme auf (dieses Problem wird weiter unten ausführlich besprochen und die entsprechenden Lösungen werden erläutert), gepaart mit Kompatibilitätsproblemen (IE unterstützt es überhaupt nicht), sodass viele Entwickler Axios verwenden . Drei-Parteien-Bibliothek.

Bibliothek, die Promise (Axios) unterstützt?

Antwort: Die Axios-Bibliothek ist mittlerweile eine relativ verbreitete Branchenlösung. Ein Grund für die Beliebtheit von Axios sind Versprechen, und ein anderer Grund ist die Beliebtheit von Bibliotheken, die auf Datenoperationen basieren (vue.js, angle.js, reagieren.js usw.), während traditionelles jQuery eine Bibliothek ist, die auf DOM-Operationen basiert. Aber es hat auch Mängel, das heißt, bevor wir es verwenden, müssen wir sicherstellen, dass die Bibliothek eingeführt wurde.

Eigentlich verwende ich persönlich immer noch lieber fetch. Wenn während der Entwicklung Kompatibilitätsprobleme auftreten, ist nur ein isomorpher Abruf erforderlich, ohne dass eine zusätzliche Bibliothek eingeführt werden muss. Konzentrieren wir uns auf das Abrufen.

Verwendung von fetch

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

URL: Zugriffsadresse
Optionen: allgemeine Konfigurationsparameter
Antwort: Rückgabeobjekt anfordern

Anforderungsparameter Einzelheiten zum Konfigurieren von Optionen finden Sie unter MDN-Abruf

Probleme und Lösungen beim Abruf

1. Sie benötigen zwei Schritte, um die Daten abzurufen

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

Anhand des obigen Codes können Sie feststellen, dass das durch direktes Drucken zurückgegebene Antwortobjekt überhaupt keine Daten enthält. Um die erforderlichen Daten zu erhalten, müssen Sie eine Zwischenmethodenantwort durchlaufen. text() (bereitgestellt durch fetch 5-Methoden)

Andererseits ist Axios viel bequemer zu verwenden. Das zurückgegebene Response-Objekt enthält Daten im Datenattribut. Der Referenzcode lautet wie folgt:

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

Natürlich ist das kein großes Problem, aber die Verwendung ist etwas mühsam.

1. Die Abrufanforderung enthält standardmäßig keine Cookies

Um dieses Problem zu lösen, müssen Sie {credentials: 'include'} in den Optionen konfigurieren

Nein Alle Anfragen Fehler werden abgelehnt

Das heißt, die Catch-Methode kann nicht alle Fehler abfangen, wenn der Fehler in Form eines Statuscodes ausgedrückt werden kann (z. B. 404, 500 usw.). Das von fetch zurückgegebene Promise wird nicht abgelehnt. Catch ist nur wirksam, wenn ein Netzwerkfehler vorliegt oder die Anforderung blockiert ist.

Um dieses Problem zu lösen, können wir feststellen, ob ok im Antwortobjekt wahr ist. Wenn nicht, verwenden Sie Promise, um manuell eine Ablehnung hinzuzufügen. Der Referenzcode lautet wie folgt:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

Wenn Sie „reject“ nicht manuell hinzufügen, wird undefiniert gedruckt, was wir natürlich nicht wollen, wenn Sie Axios verwenden Der Code lautet wie folgt:

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

Optimierung des Abrufs

Da die res.text()-Methode ein Versprechen zurückgibt, kann .then zusätzlich in aufgerufen werden Um sicherzustellen, dass alle Fehler ein einheitliches Format zurückgeben (alle geben ein Versprechen zurück), kann der obige Code wie folgt optimiert werden:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

Studenten, die Express/Koa gespielt haben oder ein gewisses Verständnis des Backends haben, Wissen Sie, dass der Server in einigen Fällen auch einige prompte Informationen zurückgibt. Wie sollten wir also damit umgehen? Zu den häufigen Fehlermeldungen gehören ein Statuscode (Status) und eine Eingabeaufforderung (Msg). Der Code wird wie folgt geändert:

Server:

res.status(404).send({
    err: 'not found'
})

Client:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

kompatible Lösung

Nachdem ich die oben genannten Probleme gelöst und die Verwendung von Fetch optimiert hatte, stellte ich fest, dass Fetch immer noch eine gute Wahl ist. Die folgende Verarbeitung kann für verschiedene Nutzungssituationen durchgeführt werden:

Erstens muss es5-shim eingeführt werden, um den Isomorphismus der neuen Funktion von fetch zu lösen.

Zweitens muss es6-promise eingeführt werden um das Kompatibilitätsproblem von Promise zu lösen;

Dann wird fetch-ie8 eingeführt, um das Isomorphismusproblem von fech zu lösen;

Schließlich wird fetch-jsonp eingeführt, um das domänenübergreifende Problem zu lösen.

Natürlich müssen Sie diese Probleme nicht speziell lösen. Das GitHub-Team stellt eine Polyfill-Lösung bereit und Sie müssen diese nicht Schritt für Schritt implementieren. Es sind nur zwei Schritte erforderlich:

1. Fetch-Paket installieren
   

   npm install whatwg-fetch --save

2. in Das verwendete Modul imports fetch
   

import 'whatwg-fetch'

window.fetch(url, options)

und andere Verwendungszwecke sind die gleichen wie fetch, daher ist die native API dieselbe.

Unter welchen Umständen können Sie auf die Verwendung von fetch verzichten

, um den Status von Promsie abzurufen, z. B.: isRejected, isResolved

Wenn Sie an den Fortschritt von jquery gewöhnt sind Methode oder verwenden Sie deffered Einige Methoden

Spezifische Methoden, die der von fetch implementierten jquery ähneln, finden Sie unter whatwg-ftch oder fetch-issue

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in $.ajax, axios und fetch (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!