So erstellen Sie HTTP -Anforderungen in JavaScript mit Axios | Mit Beispielen erklärt

Axios ist ausschließlich eine vielversprechende JavaScript-Bibliothek, die in Ihrem Projekt aufgenommen werden kann, indem Sie entweder die verwenden Node Package Manager (NPM) oder CDN-veranstaltete Axios. Es wird verwendet, um XMLHTTPrequest aus dem Browser sowie HTTP -Anfragen für Projekte mit NodeJs herzustellen. Da es sowohl mit Knotenprojekten als auch für Browser funktionieren kann, wird es oft als als bezeichnet Isomorphes Modul.

Es ist ein HTTP -Client, was bedeutet, dass wir seine verwenden können ERHALTEN, POST, Und LÖSCHEN Methoden zur Interaktion mit APIs

Einrichten von Axios in Ihrem Projekt

Wenn Sie mit dem Knotenpaket verwalten, können Sie Axios herunterladen, indem Sie den folgenden Befehl im Terminal Ihres Codesteditors eingeben:

$ npm Axios installieren

Wenn Sie mit Vanilla JavaScript arbeiten, können Sie die CDN -gehosteten AXIOS in Ihre HTML -Datei mit der folgenden Zeile aufnehmen:

Um Axios auch zu testen, werden wir die Schein -API verwenden, die von bereitgestellt wird von Req | Res. Und die URL der API lautet „https: // reqres.IN/API/Benutzer ”.

Da es sich um ein Tutorial handelt, in dem Sie gezeigt haben, wie Sie mit Axios arbeiten, um HTTP -Anfragen zu stellen, werden wir daher nicht mit HTML -Elementen manipulieren. Wir haben nur die folgenden Zeilen auf der HTML -Webseite:

Axios HTTP -Anfragen

Erhalten Sie Anfrage bei Axios

Zu machen ERHALTEN Anfragen an der API mit API. Wir verwenden die folgende Syntax:

Axios.Get (URL).dann (response => ).catch (error => ());

Verwenden wir diese Syntax, um eine Get -Anfrage an die Requenz zu stellen Res -Benutzer -API:

Axios.get ("https: // reqres.IN/API/Benutzer ").Dann ((Antwort) =>
const user = Antwort.Daten.Daten;
Konsole.log ('Get -Benutzer', Benutzer);
).fangen ((Fehler) => Konsole.Fehler (Fehler));

Wir möchten diese Methode jedoch in einer Funktion einwickeln. Verwenden Sie daher die folgenden Codezeilen:

const getusers = () =>
Axios
.get ("https: // reqres.IN/API/Benutzer ")
.Dann ((Antwort) =>
const user = Antwort.Daten.Daten;
Konsole.log ('Get -Benutzer', Benutzer);
)
.fangen ((Fehler) => Konsole.Fehler (Fehler));
;

Jetzt müssen wir nur die Funktion aufrufen getuesrs () Mit der folgenden Codezeile:

GetUsers ();

Durch Ausführen der HTML -Datei sehen Sie die folgenden Ergebnisse:

Wenn wir diesen Eintrag erweitern, können wir die Reaktion der API viel deutlicher sehen:

Wir haben einen erfolgreichen gemacht ERHALTEN Anfrage mit AXIOS anfordern und die Antwort auf die Konsole ausdrucken.

Postanforderung mit Axios

Um eine Postanforderung mit Axios zu erstellen, müssen Sie die folgende Syntax verwenden:

Axios.Post (URL).Dann ((Antwort) => ).fangen ((Fehler));

Eine Postanfrage an die Req | res api, Wir verwenden die folgenden Codezeilen, die einen neuen Benutzer erstellen:

const createUser = (user) =>
Axios
.post ("https: // reqres.IN/API/Benutzer ", Benutzer)
.Dann ((Antwort) =>
const adduser = Antwort.Daten;
Konsole.log ('Beitrag: Benutzer wird hinzugefügt', hinzugefügt);
)
.fangen ((Fehler) => Konsole.Fehler (Fehler));
;

Um das aufzurufen Postanfrage, Wir müssen diese Funktion aufrufen CreateUser (), Bevor wir dies tun, müssen wir die API darüber überprüfen, welche Art von JSON sie für eine neue Benutzererstellung akzeptiert. Auf der REQ | REQ -Website können wir das folgende JSON -Format für die Postanfrage sehen:

Es braucht a "Name" Schlüsselwertpaar und ein Schlüsselwertpaar "Job". Rufen wir das an CreateUser () Funktion mit einem geeigneten JSON in IT:

createUser (
Name: "John Doe",
Job: "Auditor",
);

Führen Sie die Datei aus und Sie sehen das folgende Ergebnis auf der Konsole Ihres Browsers:

Das ist es, wir konnten eine senden POST Anfrage an eine API mit Axios.

Anforderung mit Axios löschen

Um Anforderungen mit Axios an die API zu löschen, müssen Sie die folgende Syntax verwenden

Axios.löschen (URL).Dann ((Antwort) => ).catch ((error) => ());

Verwenden Sie die folgenden Codezeilen, um die Anforderung an die REQ | Res -API zu löschen:

const deleteUser = (id) =>
Axios
.löschen ('https: // reqres.in/api/user/$ id ')
.Dann ((Antwort) =>
Konsole.log ('löschen: Benutzer wird entfernt', ID);
)
.fangen ((Fehler) => Konsole.Fehler (Fehler));
;

Wir müssen lediglich die Funktion Deleteurer unter Verwendung der folgenden Zeile aufrufen:

DeleteUser (2);

Führen Sie die Datei aus und beobachten Sie das Ergebnis auf der Browser -Konsole:

Da Sie gehen, haben wir mit Axios erfolgreich eine Löschanfrage an eine API gestellt.

Abschluss

Axios ist ein HTTP-Client, der mithilfe des Node Package Managers oder in Ihrem Vanille-JavaScript-Projekt in Ihren Knotenprojekten aufgenommen werden kann. Axios wird verwendet, um XMLHTTPrequests zu einer API zu machen, und es ist ausschließlich eine vielversprechende Bibliothek. In diesem Beitrag haben wir gelernt, wie man mit einer externen API mit Axios interagiert und unterschiedlich macht ERHALTEN, POST Und LÖSCHEN Anfragen an die API.