Axios ist eine beliebte JavaScript-Bibliothek, die für HTTP-Anfragen verwendet wird. Es handelt sich um einen Promise-basierten HTTP-Client, der in JavaScript oder mit anderen JavaScript-Bibliotheken wie Vue.js oder React.js verwendet wird. Aufgrund seiner isomorphen Natur kann Axios gleichzeitig auf der Client- und Serverseite mit derselben Codebasis ausgeführt werden. Zudem ist es ein leistungsstarkes Tool, das zusammen mit async verwendet wird, um eine benutzerfreundliche API zu formulieren. Vor allem hat Axios die Fähigkeit, eine Anfrage automatisch abzubrechen, was andernfalls ein mühsamer Kampf ist.
Wie funktioniert Axios?
Axios verwendet die Standard- Promise-Einstellungen, um mit demselben Code parallel im Browser und in Node.js zu laufen. Unter Verwendung der Promise-basierten HTTP-Funktion führt Axios CRUD-Operationen aus und sendet HTTP-Anfragen an REST-Endpunkte. In diesem Tutorial werden wir Sie durch die Schritte zur Konfiguration einer REST-API mit Axios in Vue.js führen.
Fangen wir an!
Voraussetzungen
Um dieses Tutorial abschließen zu können, müssen Sie Folgendes haben:
- Node.js installiert und auf Ihrem Ubuntu-System eingerichtet.
- Wenn Sie CentOS verwenden, können Sie dieser Anleitung folgen, um Node.js auf CentOS 8 zu installieren.
- Grundlagen von JavaScript.
Schritt 1: Axios-Installation
Bevor wir Axios installieren, ist es wichtig, Ihre System-Repositorys zu aktualisieren, um Fehler oder Installationsfehler zu vermeiden:
|
1 |
sudo apt-get update |
Als Nächstes installieren Sie Axios mit dem npm-Softwarepaket:
|
1 |
npm install axios --save |
Alternativ können Sie Axios mit dem Paketmanager yarn installieren:
|
1 |
yarn add axios |
Erstellen Sie danach ein Vue.js-Projekt und importieren Sie Axios darin:
|
1 |
import axios from ‘axios’; |
Im nächsten Schritt werden wir die Methode axios.get() verwenden, um Anfragen abzurufen.
Schritt 2: Daten mit einer GET-Anfrage abrufen
Hier werden wir Daten mit einer GET-Anfrage abrufen. Sehen Sie sich an, wie wir die Methode axios.get() verwenden, um Daten direkt aus einer Methode abzurufen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Ruft Beiträge ab, wenn die Komponente erstellt wird. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON-Antworten werden automatisch geparst. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Sie sehen die async oder await Version:
Der obige Code ruft Beiträge ab von JSONPlaceholder und verteilt die Daten ungeordnet. Jede Art von aufgetretenen Fehlern würde in einer anderen ungeordneten Liste erscheinen.
Schritt 3: Daten mittels POST-Anfrage senden
Im Gegensatz zur axios.get()-Methode verwenden wir nun die axios.post()-Methode, um eine POST-Anfrage zu stellen. Sehen Sie sich an, wie Sie die axios.post() Methode anwenden, um Daten abzurufen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Sendet Posts an den Server, wenn aufgerufen. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Sie sehen die async oder await -Version:
Der obige Code erstellt ein Eingabefeld, das Inhalte an JSONPlaceholder. Jede Art von aufgetretenen Fehlern wird in einer anderen ungeordneten Liste angezeigt.
Schritt 4: Einrichten einer gemeinsamen Basisinstanz
In diesem Schritt erstellen wir eine gemeinsame Basisinstanz mithilfe der axios.create() -Methode. Das Ziel hinter der Einrichtung einer gemeinsamen Basisinstanz ist es, eine Basis-URL über alle Instanzen hinweg gemeinsam zu nutzen.
Die gemeinsame Basisinstanz ist praktisch, wenn alle Ihre Aufrufe einen gemeinsamen Server oder Header verwenden, wie z. B. Authorization -Header:
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Schließlich können Sie HTTP in Ihrer Komponente verwenden:
Nachdem die gesamte Konfiguration eingerichtet ist, ist unsere http-demo.js eingerichtet. Jetzt verbindet sich Axios mit JSONPlaceholder und dem Authorization -Header zur gleichen Zeit unter Verwendung derselben Codebasis. Das Beste daran ist, dass Axios die posts, Fehler identifiziert und diese in einer ungeordneten Liste anzeigt.
Fazit
In diesem Tutorial haben wir die Grundlagen des Push- und Pull-Verfahrens von Daten mit Axios gelernt. Außerdem haben wir eine gemeinsame Basis-Instanz erstellt, um eine gemeinsame URL zu teilen. Dies muss jedoch nicht das Ende Ihres Axios-Lernprozesses sein. Wir ermutigen Sie, andere Axios-Methoden zu üben, um POST, PUT, PATCH und DELETE -Anfragen zu senden. Tauchen Sie ein in die Axios-Dokumentation, um das Thema zu erkunden und selbst Projekte zu erstellen.
Um mehr über Axios- und Vue.js-Themen zu erfahren, finden Sie hier weitere Ressourcen aus unserem Blog:
- Verwendung des HTTP-Clients Axios in einer React-Anwendung: Ein Tutorial
- Verwendung von Vue und Axios zur Anzeige von Daten aus einer API
Viel Spaß beim Programmieren!
Kommentare
Noch keine Kommentare. Schreiben Sie den ersten.