Axios è un'opzione molto apprezzata per l'esecuzione di richieste HTTP in JavaScript. Scopri come farlo in modo efficace con l'aiuto di questa guida completa.
Axios è una libreria JavaScript che fornisce una semplice API per l'invio di richieste HTTP dal codice JavaScript lato client o dal codice Node.js lato server. Axios è basato sull'API Promise di JavaScript, che rende il codice asincrono più gestibile.
Iniziare con Axios
Puoi utilizzare Axios nella tua app utilizzando un Content Delivery Network (CDN) o installandolo nel tuo progetto.
Per utilizzare Axios direttamente in HTML, copia il link CDN di seguito e inseriscilo nella sezione head del tuo file HTML:
<copionesrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">copione>
Con questo approccio, puoi utilizzare Axios e i suoi Metodi HTTP nel corpo dei tuoi script HTML. Axios può anche consuma le API REST in un framework come React.
Per utilizzare Axios in un progetto Node.js, installalo nella directory del tuo progetto utilizzando il gestore di pacchetti npm o yarn:
npm installa axios
# O
filato aggiungere assi
Al momento dell'installazione, puoi iniziare a utilizzare Axios nel tuo progetto JavaScript:
cost assi = richiedere('assio');
Lungo questa guida, lavorerai con il free JSONSegnaposto API. Sebbene questa API abbia un set di risorse, utilizzerai solo il file /comments E /posts punti finali. Gli endpoint sono URL specifici a cui è possibile accedere per recuperare o manipolare i dati.
Esecuzione di richieste GET con Axios
Esistono diversi modi per effettuare una richiesta GET utilizzando Axios. Tuttavia, la sintassi generalmente dipende dalle preferenze.
Uno dei modi per effettuare una richiesta GET è utilizzare il assios() metodo con un oggetto che specifica il metodo di richiesta come Ottenere e l'URL a cui inviare la richiesta.
Per esempio:
cost assi = richiedere("assio");
assi({
metodo: "Ottenere",
URL: " https://jsonplaceholder.typicode.com/comments",
})
.Poi((ris) => {
consolare.log (res.dati);
})
.presa((errare) => {
consolare.errore (err);
});
Questo esempio crea una promessa utilizzando il modello di programmazione asincrona incatenando il .Poi() E .presa() metodi. La promessa registra la risposta alla console quando la richiesta ha esito positivo e registra il messaggio di errore se la richiesta non riesce.
Axios fornisce anche un modo più semplice per effettuare richieste GET che eliminano la necessità di passare un oggetto concatenando il file .Ottenere() metodo al assios esempio.
Per esempio:
assios
.Ottenere(" https://jsonplaceholder.typicode.com/comments")
.Poi((ris) => {
consolare.log (res.dati);
})
.presa((errare) => {
consolare.errore (err);
});
Esecuzione di richieste POST con Axios
Fare una richiesta POST con Axios è simile a fare una richiesta GET. È possibile inviare dati a un server utilizzando questa richiesta.
Il frammento di codice riportato di seguito è un esempio di come utilizzare Axios' .inviare() metodo:
assios
.inviare(" https://jsonplaceholder.typicode.com/comments", {
nome: "Jackson Smith",
e-mail: "[email protected]",
corpo: "Questo è un pezzo d'arte.",
})
.Poi((ris) => {
consolare.log (res.dati);
})
.presa((errare) => {
consolare.errore (err);
});
Il codice effettua una richiesta POST all'API JSONPlaceholder per creare un nuovo commento. IL axios.post metodo invia i dati al /comments punto finale.
I dati inviati nella richiesta sono un oggetto con a nome, e-mail, E corpo proprietà. Se la richiesta va a buon fine, il Poi Il metodo registra i dati della risposta nella console. E se c'è un errore, il presa Il metodo registra l'errore nella console.
Esecuzione di richieste PUT/PATCH con Axios
È possibile utilizzare la richiesta PUT o PATCH per aggiornare una risorsa esistente sul server. Mentre PUT sostituisce l'intera risorsa, PATCH aggiorna solo i campi specificati.
Per effettuare una richiesta PUT o PATCH con Axios, è necessario utilizzare il .Mettere() O .toppa() metodi rispettivamente.
Ecco un esempio di come usare questi metodi per aggiornare il file e-mail proprietà del commento con ID 100:
cost assi = richiedere("assio");
assios
.Ottenere(" https://jsonplaceholder.typicode.com/comments/100")
.Poi((ris) => {
consolare.log (res.data.email);
})
.presa((errare) => {
consolare.errore (err);
});// Produzione:
// '[email protected]'assios
.toppa(" https://jsonplaceholder.typicode.com/comments/100", {
e-mail: "[email protected]",
})
.Poi((ris) => {
consolare.log (res.data.email);
})
.presa((errare) => {
consolare.errore (err);
});
// Produzione:
// '[email protected]',
Questo programma prima effettua una richiesta GET all'endpoint " https://jsonplaceholder.typicode.com/comments/100". Quindi registra il file e-mail proprietà del commento con un ID di 100 alla consolle. Stiamo effettuando una richiesta GET in modo che tu possa vedere cosa è cambiato dopo aver effettuato la richiesta PATCH.
La seconda richiesta è una richiesta PATCH allo stesso endpoint. Questo codice aggiorna l'e-mail del commento a [email protected].
Esecuzione di richieste DELETE con Axios
Puoi usare il ELIMINARE richiesta di eliminare una risorsa sul server.
Prendi il seguente esempio di come utilizzare il file .eliminare() metodo per eliminare una risorsa dal server:
assios
.eliminare(" https://jsonplaceholder.typicode.com/comments/10")
.Poi((ris) => {
consolare.log (res.dati);
})
.presa((errare) => {
consolare.errore (err);
});
//Output:
// {}
Registrando un oggetto vuoto nella console, il codice precedente mostra che ha eliminato il commento con ID 10.
Esecuzione di richieste simultanee con Axios
Puoi recuperare i dati da più endpoint contemporaneamente utilizzando Axios. Per fare ciò, è necessario utilizzare il .Tutto() metodo. Questo metodo accetta una matrice di richieste come parametro e si risolve solo quando ricevi tutte le risposte.
Nell'esempio seguente, il .Tutto() metodo recupera i dati da due endpoint contemporaneamente:
assios
.Tutto([
axios.get(" https://jsonplaceholder.typicode.com/comments? _limite=2"),
axios.get(" https://jsonplaceholder.typicode.com/posts? _limite=2"),
])
.Poi(
axios.spread((commenti, post) => {
consolare.log (commenti.dati);
consolare.log (post.data);
})
)
.presa((errare) =>consolare.errore (err));
Il blocco di codice precedente invia le richieste contemporaneamente e quindi passa le risposte al file .Poi() metodo. di Axios .diffusione() Il metodo separa le risposte e assegna ciascuna risposta alla sua variabile.
Infine, la console registra il file dati proprietà delle due risposte: commenti e post.
Intercettazione delle richieste con Axios
A volte, potrebbe essere necessario intercettare una richiesta prima che arrivi al server. Puoi usare Axios' interceptors.request.use() metodo per intercettare le richieste.
Nell'esempio seguente, il metodo registra il tipo di richiesta nella console per ogni richiesta effettuata:
axios.interceptors.request.use(
(config) => {
consolare.tronco d'albero(`${config.metodo} richiesta fatta».);
ritorno configurazione;
},
(errore) => {
ritornoPromettere.reject (errore);
}
);
assios
.Ottenere(" https://jsonplaceholder.typicode.com/comments? _limite=2")
.Poi((ris) =>consolare.log (res.dati))
.presa((errare) =>consolare.errore (err));
Il programma definisce un intercettore Axios utilizzando il file axios.interceptors.request.use metodo. Questo metodo richiede config E errore oggetti come argomenti. IL config oggetto contiene informazioni sulla richiesta, incluso il metodo di richiesta (config.method) e l'URL della richiesta (config.url).
La funzione intercettore restituisce il config opporsi, consentendo alla richiesta di procedere normalmente. Se c'è un errore, la funzione restituisce il rifiutato Promettere oggetto.
Infine, il programma fa una richiesta per testare l'intercettore. La console registrerà il tipo di richiesta effettuata, in questo caso una richiesta GET.
C'è di più in Axios
Hai imparato come effettuare e intercettare richieste nei tuoi progetti utilizzando Axios. Molte altre funzionalità, come la trasformazione delle richieste e l'utilizzo delle istanze Axios, sono disponibili per te come sviluppatore JavaScript da esplorare. Axios rimane un'opzione preferita per effettuare richieste HTTP nelle tue applicazioni JavaScript. Tuttavia, Fetch API è un'altra buona opzione che puoi esplorare.