So installieren und verwenden Sie Axios in JavaScript

Der Aufbau einer realen Anwendung erfordert häufig die Interaktion mit Apis Daten senden und abrufen; Es gibt mehrere Möglichkeiten, mit APIs zu interagieren. Eines der Pakete, mit denen JavaScript sowie NodeJS -Projekte mit APIs mit sehr einfacher und unkomplizierter Code -Syntax interagieren können, ist Axios.

Axios ist ein HTTP -Client, mit dem XMLHTTPrequest aus dem Browser sowie HTTP -Anforderungen für Projekte mit NodeJS erstellt wurde. Es wird oft als isomorpher HTTP -Client bezeichnet, wobei isomorphe Mittel sowohl für NodeJs als auch für Browser (Vanille -JavaScript) bezeichnet werden.

Axios liefert Methoden wie erhalten, Post, Und löschen und transformiert automatisch die JSON -Daten, was sie von den trivialen JavaScript -Methoden wie der unterscheidet bringen() Methode aus der Fetch -API.

Installieren von Axios in JavaScript

Wie bereits oben erwähnt, ist Axios sowohl für den Browser als auch für die Knotenumgebung vorhanden, was bedeutet, dass es mit NPM und in Vanille-JavaScript unter Verwendung des CDN-Hosted Axios-Skripts installiert werden kann. Es gibt mehrere Möglichkeiten, Axios JavaScript in Ihrem Projekt zu installieren, wie z. B.:

Verwenden des Node Package Managers (NPM)

Axios steht der NPM -Bibliothek zur Verfügung und kann einfach im Projekt installiert werden, indem der folgende Befehl im Terminal Ihres Codesteditors ausgeführt wird:

$ npm Axios installieren

Verwenden von Bower, um Axios zu installieren

Bower wird in den Massen zunehmend immer berühmter. Bower hilft bei der Installation von Webpaketen genau wie NPM. Wenn Sie mit Bower arbeiten, können Sie Axios mit den folgenden Codezeilen installieren:

$ bower installieren axios

Verwenden eines CDN -Hosted Axios

CDN steht für Content Delivery Networks. Mit diesen Netzwerken können Sie JavaScript -Bibliotheken verwenden, die auf ihren Servern gehostet werden. Axios können in Ihrem Projekt mit einem der beiden CDN -Axios -Anbieter installiert werden, wobei das erste Wesen verwendet wird "Jsdelivr CDN" und der andere ist das "Unpkg" CDN.

Für Jsdelivr CDN Verwenden Sie den Befehl in Ihrer HTML -Datei:

Für die UNPKG CDN Verwenden Sie die Befehl HTML -Datei:

Mit diesen oben genannten Befehlen sollten Sie in Ihren Projekten in der Lage sein, Axios zu installieren und zu verwenden.

Verwenden von Axios in JavaScript

Um die Verwendung von Axios zu demonstrieren, die wir gerade mit einer der oben genannten Methoden in einem JavaScript -Programm installiert haben, benötigen wir eine HTML -Webseite. Für diesen Beitrag schreiben wir die folgenden Zeilen in der HTML -Datei:

Benutzer

Wie Sie im Code bemerken können, haben wir eine nicht ordnungsgemäße Liste erstellt, mit der wir die Liste der Benutzer anzeigen, die wir von der API erhalten.

Dies sollte uns die folgende Webseite auf unserem Browser geben:

Um das Abnehmen von Daten mit den Axios zu demonstrieren, werden wir die verwenden Req | Res API und die URL für die API lautet „https: // reqres.IN/API/Benutzer ”. Der nächste Schritt besteht darin, drei verschiedene Funktionen in unsere JavaScript -Datei zu schreiben:

• fetch_users (): Dadurch wird Axios verwendet, um Daten von der API zu erhalten und die Daten an die Funktion appendTodom () zu senden
• appendTodom (): Dadurch wird der Name des Benutzers zum Benutzern hinzugefügt
  Tag nach dem Erstellen eines neuen Listenelements mit Hilfe der create_li Funktion
  • create_li (): Dadurch werden die Daten jedes Benutzers angelegt und ein neues Listenelement erstellt, wobei nur der Name des in ihm platzierten Benutzers:

  Die Funktion fetch_user () sieht Folgendes aus:

  const fetch_users = () =>
  Axios.get ("https: // reqres.IN/API/Benutzer ").Dann ((Antwort) =>
  const user = Antwort.Daten.Daten;
  appendTodom (Benutzer);
  )
  .fangen ((Fehler) => Konsole.Fehler (Fehler));
  ;

  Die Funktion appendTodom () kann mit den folgenden Zeilen erstellt werden:

  const appendTodom = (user) =>
  const ul = dokument.QuerySelector ("ul");
  Benutzer.map ((user) =>
  ul.appendChild (create_li (user));
  );
  ;

  Und schließlich kann die Funktion create_li () mit den folgenden Codezeilen erstellt werden:

  constcreate_li = (user) =>
  const li = dokument.CreateLement ("li");
  li.textContent = '$ Benutzer.ID: $ Benutzer.First_name $ Benutzer.Familienname, Nachname';
  Rückkehr li;
  ;

  Nachdem wir alle unsere Funktionen codiert haben, müssen wir nur die Funktion fetch_users aufrufen, aber dafür werden wir in unserer HTML -Datei mit den folgenden Codezeilen eine Schaltfläche hinzufügen:

  Klicken Sie auf mich, um Daten zu erhalten

  Nachdem wir unsere Schaltfläche haben, können wir die Funktion fetch_users () auf der Schaltfläche ausführen. Drücken Sie den folgenden Code in unserer Skriptdatei:

  $ ("#button").klicken (function ()
  fetch_users ();
  );

  Der Füllen Sie den HTML -Code aus ist als:

  
  
  

  Benutzer

  
  
  
  Klicken Sie auf mich, um Daten zu erhalten
  
  

  Der Der vollständige JavaScript -Code ist wie:

  $ ("#button").klicken (function ()
  fetch_users ();
  );
  constcreate_li = (user) =>
  const li = dokument.CreateLement ("li");
  li.textContent = '$ Benutzer.ID: $ Benutzer.First_name $ Benutzer.Familienname, Nachname';
  Rückkehr li;
  ;
  constappendtodom = (user) =>
  const ul = dokument.QuerySelector ("ul");
  Benutzer.map ((user) =>
  ul.appendChild (create_li (user));
  );
  ;
  constfetch_users = () =>
  Axios
  .get ("https: // reqres.IN/API/Benutzer ")
  .Dann ((Antwort) =>
  const user = Antwort.Daten.Daten;
  appendTodom (Benutzer);
  )
  .fangen ((Fehler) => Konsole.Fehler (Fehler));
  ;

  Wenn Sie diesen Code ausführen, erhalten Sie das folgende Ergebnis in Ihrem Browser:

  Wie Sie sehen können, können wir Daten von der abholen API Bei der Taste drücken Sie mit Verwendung Axios In unserem JavaScript -Code.

  Abschluss

  Axios ist ein isomorpher HTTP -Client, der sowohl für die Notenentwicklungsumgebung als auch für den Vanille -JavaScript verfügbar ist. Axios ist eine streng vielversprechende Bibliothek und konvertiert automatisch die Daten, die sie aus der API aus dem JSON-Format abrufen. Um Axios in Ihrem Projekt zu verwenden, müssen Sie es entweder in der NPM -Bibliothek installieren oder in Ihrer HTML. In diesem Beitrag haben wir gelernt, wie man Axios in unserem JavaScript -Projekt installiert und ausführt.