Axios è una popolare libreria JavaScript utilizzata per effettuare richieste HTTP. Si tratta di un client HTTP basato su promise utilizzato in JavaScript o con altre librerie JavaScript come Vue.js o React.js. A causa della sua natura isomorfa, Axios può essere eseguito contemporaneamente sul lato client e sul lato server utilizzando la stessa base di codice. Inoltre, è un potente strumento utilizzato collettivamente con async per formulare un'API intuitiva. Soprattutto, Axios ha la capacità di interrompere automaticamente una richiesta, operazione che altrimenti richiederebbe un notevole sforzo.
Come funziona Axios?
Axios utilizza le impostazioni predefinite di promise per l'esecuzione in parallelo nel browser e in Node.js con lo stesso codice. Utilizzando la funzionalità HTTP basata su promise, Axios esegue operazioni CRUD e invia richieste HTTP a endpoint REST. In questo tutorial, ti guideremo attraverso i passaggi per configurare un'API REST con Axios in Vue.js.
Cominciamo!
Prerequisiti
Per poter completare questo tutorial, è necessario disporre di quanto segue:
- Node.js installato e configurato sul proprio sistema Ubuntu.
- Se si utilizza il sistema operativo CentOS, è possibile seguire questa guida per installare Node.js su CentOS 8.
- Nozioni di base di JavaScript.
Passo 1: Installazione di Axios
Prima di installare Axios, è importante aggiornare i repository di sistema per evitare errori o fallimenti dell'installazione:
|
1 |
sudo apt-get update |
Successivamente, installa Axios utilizzando il pacchetto software npm :
|
1 |
npm install axios --save |
In alternativa, è possibile installare Axios utilizzando il gestore di pacchetti yarn :
|
1 |
yarn add axios |
Dopodiché, crea un progetto Vue.js e importa Axios al suo interno:
|
1 |
import axios from ‘axios’; |
Nel passaggio successivo, utilizzeremo il metodo axios.get() per recuperare le richieste.
Passo 2: Recuperare i dati utilizzando una richiesta GET
Qui, recupereremo i dati utilizzando una richiesta GET. Dai un'occhiata a come utilizziamo il metodo axios.get() per recuperare i dati direttamente da un metodo:
|
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: [], }; }, // Recupera i post quando il componente viene creato. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Le risposte JSON vengono analizzate automaticamente. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Vedrai la versione async o await :
Il codice sopra recupererà i post da JSONPlaceholder e distribuirà i dati in modo non ordinato. Qualsiasi tipo di errore riscontrato apparirà in un elenco non ordinato differente.
Passaggio 3: Inviare dati tramite richiesta POST
Al contrario del metodo axios.get() , ora useremo il metodo axios.post() per effettuare una richiesta POST. Dai un'occhiata a come applicare il metodo axios.post() per recuperare i dati:
|
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: { // Invia i post al server quando viene chiamato. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Vedrai la versione async o await :
Il codice sopra creerà un campo di input che invia il contenuto a JSONPlaceholder. Qualsiasi tipo di errore riscontrato appare in un elenco non ordinato diverso.
Passaggio 4: Configura un'istanza di base comune
In questo passaggio, creeremo un'istanza di base comune utilizzando il metodo axios.create() . L'obiettivo alla base della configurazione di un'istanza di base comune è condividere un URL di base tra tutte le istanze.
L'istanza di base comune è utile se tutte le chiamate utilizzano un server o un'intestazione comune come Authorization :
|
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}" } }) |
Infine, sei pronto per utilizzare HTTP nel tuo componente:
Con tutta la configurazione impostata, la nostra http-demo.js è stabilita. Ora, Axios si connette con JSONPlaceholder e Authorization header contemporaneamente utilizzando la stessa base di codice. La parte migliore è che Axios recupera i post, identifica gli errori e li mostra in un elenco non ordinato.
Conclusione
In questo tutorial, abbiamo imparato le basi dell'invio e della ricezione di dati utilizzando Axios. Inoltre, abbiamo creato un'istanza di base comune per condividere un URL comune. Tuttavia, questo non deve essere la fine del tuo apprendimento di Axios. Ti incoraggiamo a fare pratica con altri metodi di Axios per inviare POST, PUT, PATCH e DELETE richieste. Immergiti nella documentazione di Axios per esplorare l'argomento e provare a creare progetti tu stesso.
Per saperne di più sugli argomenti relativi a Axios e Vue.js, consulta queste risorse dal nostro blog:
- Utilizzare il client HTTP Axios in un'applicazione React: un tutorial
- Utilizzare Vue e Axios per mostrare i dati da un'API
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.