Axios-Anfänger: Ein praktischer HTTP-Client, ein praktischer, verspracher HTTP-Client

Schlüsselpunkte von Axios

• axios ist ein beliebter HTTP-Client mit einer beliebten, versprochenen HTTP mit einer benutzerfreundlichen API, die in Browsern und Node.js-Umgebungen verwendet werden kann. Es bietet ein vielseitiges Tool für JavaScript -Entwickler.
• axios unterscheidet sich in mehrfacher Hinsicht von der integrierten Fetch-API, einschließlich der Behandlung von HTTP-Fehlercodes, der automatischen Einbeziehung von Cookies in Anforderungen und der Möglichkeit, Updates für Upload-/Download-Fortschritte bereitzustellen.
• Axios ermöglicht es Entwicklern, Ausgangs- oder Eingabedaten zu konvertieren und Interceptors hinzuzufügen, Funktionen, die ausgelöst werden, wenn eine Anforderung gestellt oder eine Antwort empfangen wird. Diese Funktionen bieten Flexibilität für die Verarbeitung von Daten und die Verwaltung von Anforderungen und Antworten.
• Ein leistungsstarkes Ökosystem der Bibliothek von Drittanbietern, um die Fähigkeiten von Axios zu erweitern. Diese Add-Ons decken von Interceptors und Testadaptern bis zu Holzfällern ab, wodurch die Funktionen von Axios in verschiedenen Anwendungsfällen verbessert werden.

Axios ist ein beliebter HTTP-Client mit einer beliebten Versprechens mit einer benutzerfreundlichen API und kann in Browsern und Node.js-Umgebungen verwendet werden. HTTP -Anfragen zum Erhalten oder Speichern von Daten ist eine der häufigsten Aufgaben für Client -JavaScript -Anwendungen. Bibliotheken von Drittanbietern (insbesondere JQuery) sind seit langem eine beliebte Methode, um mit langwierigen Browser-APIs zu interagieren und Kreuzungsunterschiede zu beseitigen. Da die Menschen JQuery nach und nach verbesserte native DOM-APIs oder Front-End-UI-Bibliotheken wie React und Vue.js zuwenden, wird es bedeutungslos, es nur für seine $ -Ajax-Funktionalität einzubeziehen. Lassen Sie uns sehen, wie Sie mit Axios in Ihrem Code beginnen und einige Funktionen kennenlernen, die es bei JavaScript -Entwicklern populär machen.

Vergleich von Axios mit Fetch

Sie wissen vielleicht bereits, dass moderne Browser eine neuere API -API eingebaut haben. Warum also nicht einfach verwenden? Es gibt einige Unterschiede zwischen den beiden, was viele glauben, dass Axios vorteilhafter werden. Einer der Unterschiede ist, wie diese beiden Bibliotheken mit HTTP -Fehlercodes umgehen. Wenn der Server bei der Verwendung von Fetch einen 4xx- oder 5xx -Serienfehler zurückgibt, wird Ihr Catch () -Rückruf nicht ausgelöst und der Entwickler muss den Antwortstatuscode überprüfen, um festzustellen, ob die Anforderung erfolgreich ist. Wenn andererseits eine dieser Statuscodes zurückgegeben wird, lehnt Axios die Anfrage nach dem Versprechen ab. Ein weiterer kleiner Unterschied, der Entwickler, die neu in APIs sind, häufig verwirrt, besteht darin, dass Fetch bei einer Anfrage keine automatischen Cookies an den Server zurücksendet. Eine Option muss explizit übergeben werden, um sie einzuschließen. Axios ist hier, um Sie zu unterstützen. Ein Unterschied, der eine Barriere sein kann, ist das Fortschritts -Update von Upload/Download. Da Axios auf älteren XHR -APIs aufgebaut ist, können Sie OnuploadProgress- und OndownloadProgres -Rückruffunktionen registrieren, um den Prozentsatz der Fertigstellung in der Benutzeroberfläche der Anwendung anzuzeigen. Derzeit unterstützt Fetch diese Funktion nicht. Schließlich ist Axios in Browsern und Node.js. Dies hilft, den JavaScript-Code zwischen dem Browser und dem Backend zu teilen oder die serverseitige Rendering der Front-End-Anwendung durchzuführen. Hinweis: Der Knoten verfügt über eine Version der Fetch -API, aber meiner Meinung nach machen die anderen Funktionen, die Axios anbietet, es vorteilhafter.

Installation

Wie Sie vielleicht erwarten, ist die häufigste Möglichkeit, Axios zu installieren, über den NPM -Paketmanager:

npm i axios

und fügen Sie ihn in Ihren Code ein, wo Sie ihn benötigen:

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

Wenn Sie keine Art von Modul -Bundler verwenden (z. B. Webpack), können Sie Bibliotheken immer auf traditionelle Weise aus CDN extrahieren:

<🎜>

Browserunterstützung

Axios läuft in allen modernen Webbrowsern und Internet Explorer 8.

Senden Sie eine Anforderung

Ähnlich wie bei der $ .ajax -Funktion von JQuery können Sie jede Art von HTTP -Anforderung erstellen, indem Sie ein Optionsobjekt an Axios übergeben:

axios({
  method: 'post',
  url: '/login',
  data: {
    user: 'brunos',
    lastName: 'ilovenodejs'
  }
});

Hier sagen wir Axios, welche HTTP -Methode wir verwenden möchten (z. B. GET/Post/Löschen usw.) und an welche URL die Anfrage stellen sollen. Wir stellen auch einige Daten bereit, die mit der Anforderung in Form eines einfachen JavaScript -Objekts von Schlüssel/Wert -Paaren gesendet werden. Standardmäßig serialisiert Axios es mit JSON und sendet es als Anfragekörper.

Anforderungsoptionen

Wenn Sie eine Anfrage stellen, können Sie viele andere Optionen übergeben, aber hier sind einige der häufigsten Optionen:

• baseUrl: Wenn Sie eine Basis -URL angeben, wird sie an eine relative URL beigefügt, die Sie verwenden.
• headers: Das Taste/Value -Paar -Objekt, das als Header gesendet werden soll.
• params: Das Schlüssel-/Wertpaarobjekt, das als Abfragezeichenfolge an der URL serialisiert und angehängt wird.
• responseType: Wenn das von Ihnen erwartete Antwortformat nicht JSON ist, können Sie diese Eigenschaft auf arraybuffer, blob, document, text, stream oder
festlegen.
• auth
: Das Objekt, das ein Benutzername- und Kennwort -Feld übergibt, verwendet diese Anmeldeinformationen, um die HTTP -Basisauthentifizierung in der Anforderung durchzuführen.

bequeme Methode

get Wie JQuery gibt es einige Verknüpfungen, um verschiedene Arten von Anfragen auszuführen. Die Methoden delete, head, options und

akzeptieren zwei Parameter: eine URL und ein optionales Konfigurationsobjekt.

npm i axios

Die Methoden post put, patch und

nehmen das Datenobjekt als zweites Parameter und das optionale Konfigurationsobjekt als drittes Parameter an:

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

Antwort empfangen

Nachdem eine Anfrage gestellt wurde, gibt Axios ein Versprechen zurück, das auf ein Antwortobjekt oder ein Fehlerobjekt auflöst.

<🎜>

Antwortobjekt

then() Wenn die Anfrage erfolgreich ist, erhält Ihr Rückruf

ein Antwortobjekt mit den folgenden Eigenschaften:

• data
: vom Server zurückgegebene Nutzlast. Standardmäßig erwartet Axios JSON und analysiert es in ein JavaScript -Objekt.
• status
: Der vom Server zurückgegebene HTTP -Code.
• statusText
: Die vom Server zurückgegebene HTTP -Statusnachricht.
• headers
: Alle vom Server zurückgesandten Header.
• config
: Originalanforderungskonfiguration.
• request
: (Beim Ausführen im Browser) Das tatsächliche XMLHTTPREquest -Objekt.

Fehlerobjekt

Wenn ein Problem mit der Anfrage vorliegt, wird das Versprechen verweigert und ein Fehlerobjekt angezeigt, das mindestens die folgenden Eigenschaften enthält:

• message
: Fehlermeldungstext.
• response
: Das im vorherige Abschnitt beschriebene Antwortobjekt (falls empfangen).
• request
: (Beim Ausführen im Browser) Das tatsächliche XMLHTTPREquest -Objekt.
• config
: Originalanforderungskonfiguration.

konvertieren und interceptor

$http axios liefert einige simple Merkmale, die von der Angulars

-Bibliothek inspiriert sind. Obwohl sie ähnlich aussehen, sind ihre Anwendungsfälle etwas unterschiedlich.

konvertieren

Axios ermöglicht es Ihnen, Funktionen zum Konvertieren von Ausgabe- oder Eingabedaten in Form von zwei Konfigurationsoptionen bereitzustellen, die Sie bei einer Anforderung festlegen können: transformRequest und transformResponse. Beide Eigenschaften sind Arrays, mit denen Sie mehrere Funktionen verknüpfen können, die Daten übergeben. Jede an transformRequest übergebene Funktion wird angewendet, um Anfragen zu posten, zu posten und zu Patch. Sie empfangen Anforderungsdaten und Headerobjekte als Parameter und müssen das geänderte Datenobjekt zurückgeben.

npm i axios

kann auf die gleiche Weise Funktionen zu transformResponse Funktionen hinzufügen, rufen Sie sie jedoch nur an, bevor Sie Antwortdaten verwenden und die Antwort an einen verknüpften then() -Anruf übergeben. Wofür können wir die Konvertierung verwenden? Ein potenzieller Anwendungsfall besteht darin, mit APIs umzugehen, die erwarten, Daten in einem bestimmten Format wie XML oder sogar CSV zu empfangen. Sie können ein Paar von Konvertierungen einrichten, um die Ausgabe- und Eingabedaten in das von der API erforderliche Format umzuwandeln und von diesem Format zurückzukehren. Es ist erwähnenswert, dass Axios 'Standard transformRequest und transformResponse Funktionen Daten zu und von JSON umwandeln und angeben, dass Ihre eigenen diese Transformationen überschreiben.

Interceptor

Während mit der Konvertierung können Sie die Ausgangs- und Eingabedaten ändern, Axios können auch Funktionen hinzufügen, die als Interceptors bezeichnet werden. Wie bei der Konvertierung können auch diese Funktionen an die Anfrage beigefügt oder abgefeuert werden, wenn eine Antwort empfangen wird.

// ES2015 风格导入
import axios from 'axios';

// Node.js 风格 require
const axios = require('axios');

Wie Sie vielleicht aus dem obigen Beispiel bemerkt haben, gibt es einige wichtige Unterschiede zwischen Interceptors und Conversions. Anstatt nur Daten oder Header zu empfangen, erhält ein Interceptor eine vollständige Anforderungskonfiguration oder ein Antwortobjekt. Beim Erstellen eines Interceptor können Sie auch eine Fehlerhandlerfunktion bereitstellen, mit der Sie alle Fehler aufnehmen und angemessen umgehen können. Mit einem Anforderungs -Interceptor kann Operationen wie das Abrufen eines Tokens aus einem lokalen Geschäft und das Senden aller Anfragen durchgeführt werden, während ein Antwort -Interceptor verwendet werden kann, um eine 401 -Antwort zu erfassen und sie zur Genehmigung auf eine Anmeldeseite umzuleiten.

add-Ons

Als beliebte Bibliothek profitiert Axios von einem Bibliotheksökosystem der Drittanbieter, das seine Fähigkeiten erweitert. Von Interceptors bis hin zu Testadaptern bis hin zu Holzfällern stehen viele Tools zur Verfügung. Hier sind einige Tools, von denen ich denke, dass Sie vielleicht nützlich finden:

• mock-adapter: Ermöglicht Ihnen die einfachen Simulation von Anforderungen, um den Testcode zu erleichtern.
• cache-plugin: Ein Wrapper für selektiv Cache -Anforderungen.
• redux-axios-middleware: Wenn Sie ein Redux -Benutzer sind, bietet diese Middleware eine saubere Möglichkeit, AJAX -Anforderungen mit normalen alten Vorgängen zu planen.

Eine Liste weiterer Add-Ons und Erweiterungen ist im Axios Github-Repository verfügbar. Alles in allem gibt es bei Axios viel zu empfehlen. Es hat eine einfache API und einen praktischen und schnellen Weg, der jedem, der jQuery verwendet hat, bekannt ist. Die Popularität und die Verfügbarkeit verschiedener Add-Ons von Drittanbietern machen es zu einer zuverlässigen Option, in Ihre Anwendung aufzunehmen, egal ob es sich um das Frontend, das Back-End oder beides handelt.

Axios FAQ (FAQ)

Was ist der Unterschied zwischen Axios und Fetch -API?

Axios und Fetch -APIs sind beide beliebte HTTP -Anforderungswerkzeuge. Es gibt jedoch einige wichtige Unterschiede zwischen den beiden. Axios ist ein vielversprechender HTTP-Client, der in Browsern und Node.js-Umgebungen arbeitet. Es bietet eine einzelne API zum Umgang mit HTTP -Schnittstellen für XMLHTTPrequests und Knoten. Andererseits liefert die Fetch -API eine gemeinsame Definition von Anforderungs- und Antwortobjekten, die auch auf Versprechen basiert. Im Gegensatz zu Axios basiert die Fetch-API jedoch nicht auf XMLHTTPrequest, sondern ein integriertes Modul für JavaScript ES6.

Wie kann ich Axios verwenden, um Fehler zu behandeln?

axios liefert eine leistungsstarke Methode zum Umgang mit Fehlern. Wenn während einer Axios -Anforderung ein Fehler auftritt, wird er abgelehnt und ein Fehlerobjekt angezeigt. Das Fehlerobjekt enthält Informationen über die Ursache des Fehlers, z. B. Fehlermeldungen, HTTP -Statuscodes sowie Anforderungs- und Antwortobjekte. Sie können diesen Fehler mit dem Try/Catch -Block oder der Catch -Methode des Versprechens fangen.

Kann ich Axios in React verwenden?

Ja, Axios ist für React verfügbar. Tatsächlich ist es eine beliebte Wahl für HTTP -Anforderungen in React -Anwendungen. Sie können Axios in React verwenden, um Daten von der API zu erhalten und diese in Ihrer Komponente anzuzeigen. Axios -Anfragen in React können im componentDidMount oder useEffect Haken gestellt werden.

Wie storniere ich eine Anfrage in Axios?

Axios bietet einen Mechanismus zur Absage von Anforderungen. Dies kann unter Verwendung der CancelToken.source -Fabrikmethode erfolgen. Wenn Sie die Anforderung stornieren möchten, rufen Sie einfach die cancel -Methode im Quellobjekt an.

Wie erstellt man eine Postanforderung mit Axios?

Es ist einfach, eine Postanforderung mit Axios zu erstellen. Sie können die post -Methode der Axios -Instanz verwenden und die URL und Daten als Parameter übergeben. Die Daten sollten ein JavaScript -Objekt sein, das die angeforderte Nutzlast darstellt.

Kann ich Axios in Vue.js verwenden?

Ja, Axios ist für Vue.js. Es ist eine beliebte Wahl, um HTTP -Anfragen in Vue.js -Anwendungen zu stellen. Sie können Axios in Vue.js verwenden, um Daten von der API zu erhalten und diese in Ihrer Komponente anzuzeigen.

Wie setzen Sie Standardheader in Axios ein?

Mit

Axios können Sie Standardheader festlegen, die mit jeder Anfrage gesendet werden. Dies kann unter Verwendung der defaults Eigenschaft der Axios -Instanz erfolgen. Sie können die Eigenschaft defaults des headers -Onjekts auf ein JavaScript -Objekt einstellen, das den Header darstellt.

Kann ich Axios in einer node.js -Umgebung verwenden?

Ja, Axios können in node.js -Umgebungen verwendet werden. Es bietet eine einzelne API zum Umgang mit HTTP -Schnittstellen für XMLHTTPrequests und Knoten. Dies macht es zu einem vielseitigen Tool, um HTTP -Anforderungen in JavaScript zu erstellen.

Wie gehe ich Antworten in Axios mit?

Wenn eine Anforderung mit Axios gestellt wird, wird ein Versprechen als Antwortobjekt analysiert. Dieses Objekt enthält Daten, die vom Server, den Status der Anforderung, den Header und andere Informationen zurückgegeben wurden. Sie können die Methode des Versprechens verwenden, um diese Antwort zu behandeln. then

Kann ich mit Axios gleichzeitig mehrere Anfragen stellen?

Ja, Axios ermöglicht es Ihnen, mehrere Anforderungen gleichzeitig zu stellen. Dies kann mit der Axios '

-Methode erfolgen. Sie übergeben das von der Axios -Anfrage zurückgegebene Versprechen -Array an die all -Methode, die ein neues Versprechen zurückgibt, das bei Abschluss aller Anfragen analysiert wird. all

Das obige ist der detaillierte Inhalt vonAxios-Anfänger: Ein praktischer HTTP-Client, ein praktischer, verspracher HTTP-Client. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!