Axios is een populaire JavaScript-bibliotheek die wordt gebruikt om HTTP-verzoeken te doen. Het is een op promises gebaseerde HTTP-client die wordt gebruikt in JavaScript of met andere JavaScript-bibliotheken zoals Vue.js of React.js. Vanwege de isomorfe aard kan Axios tegelijkertijd op de client- en serverzijde draaien met behulp van dezelfde codebase. Bovendien is het een krachtig hulpmiddel dat gezamenlijk wordt gebruikt met async om een gebruiksvriendelijke API te formuleren. Bovenal heeft Axios de mogelijkheid om een verzoek automatisch af te breken, wat anders een hele opgave is.
Hoe werkt Axios?
Axios gebruikt de standaard promise instellingen om parallel te draaien in de browser en Node.js met dezelfde code. Met behulp van de op promises gebaseerde HTTP-functie voert Axios CRUD bewerkingen uit en stuurt HTTP-verzoeken naar REST eindpunten. In deze handleiding zullen we u door de stappen leiden voor het configureren van een REST-API met Axios in Vue.js.
Laten we beginnen!
Vereisten
Om deze handleiding te kunnen voltooien, moet u over het volgende beschikken:
- Node.js geïnstalleerd en ingesteld op uw Ubuntu-systeem.
- Als u Centos OS gebruikt, kunt u deze handleiding volgen om Node.js te installeren op Centos 8.
- Basisprincipes van JavaScript.
Stap 1: Axios-installatie
Voordat we Axios installeren, is het belangrijk om uw systeemrepository's bij te werken om fouten of mislukte installaties te voorkomen:
|
1 |
sudo apt-get update |
Installeer vervolgens Axios met behulp van het npm softwarepakket:
|
1 |
npm install axios --save |
Als alternatief kunt u Axios installeren met behulp van de yarn pakketbeheerder:
|
1 |
yarn add axios |
Maak daarna een Vue.js-project aan en importeer Axios daarin:
|
1 |
import axios from ‘axios’; |
In de volgende stap zullen we de axios.get() methode gebruiken om verzoeken op te halen.
Stap 2: Gegevens ophalen met een GET-verzoek
Hier gaan we gegevens ophalen met behulp van een GET verzoek. Bekijk hoe we de axios.get() methode gebruiken om gegevens rechtstreeks uit een methode op te halen:
|
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: [], }; }, // Haalt posts op wanneer de component wordt aangemaakt. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // JSON-responses worden automatisch geparseerd. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Je ziet de async of await versie:
De bovenstaande code haalt posts op van JSONPlaceholder en distribueert gegevens op een ongeordende manier. Eventuele fouten die optreden, verschijnen in een andere ongeordende lijst.
Stap 3: Gegevens pushen met behulp van een POST-verzoek
In tegenstelling tot de axios.get() methode, zullen we nu de axios.post() methode om een POST verzoek te doen. Bekijk hoe je de axios.post() methode toepast om gegevens op te halen:
|
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: { // Pusht posts naar de server wanneer aangeroepen. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Je ziet de async of await versie:
De bovenstaande code maakt een invoerveld dat inhoud verzendt naar JSONPlaceholder. Eventuele fouten die optreden, verschijnen in een andere ongeordende lijst.
Stap 4: Een gemeenschappelijke basisinstantie instellen
In deze stap gaan we een gemeenschappelijke basisinstantie maken met behulp van de axios.create() methode. Het doel achter het opzetten van een gemeenschappelijke basisinstantie is om een basis-URL te delen tussen alle instanties.
De gemeenschappelijke basisinstantie komt goed van pas als al je aanroepen een gemeenschappelijke server of header gebruiken zoals 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}" } }) |
Ten slotte ben je helemaal klaar om HTTP te gebruiken in je component:
Met alle configuratie ingesteld, is onze http-demo.js tot stand gebracht. Nu maakt Axios verbinding met de JSONPlaceholder en Authorization header tegelijkertijd met behulp van dezelfde codebase. Het beste is dat Axios de posts ophaalt, de fouten identificeert en ze weergeeft in een ongeordende lijst.
Conclusie
In deze handleiding hebben we de basis geleerd van het pushen en pullen van gegevens met Axios. Daarnaast hebben we een gemeenschappelijke basisinstantie gemaakt om een gemeenschappelijke URL te delen. Dit hoeft echter niet het einde van je Axios-leerproces te zijn. We moedigen je aan om andere Axios-methoden te oefenen om POST, PUT, PATCH en DELETE verzoeken te verzenden. Duik in de Axios-documentatie om het onderwerp te verkennen en zelf projecten te bouwen.
Om meer te leren over Axios- en Vue.js-onderwerpen, bekijk deze bronnen van onze blog:
- HTTP-client Axios gebruiken in een React-applicatie: een handleiding
- Vue en Axios gebruiken om gegevens van een API weer te geven
Veel computerplezier!
Reacties
Nog geen reacties. Wees de eerste.