Inviare richieste HTTP GET e POST con Javascript e Axios
Axios è una libreria JavaScript utilizzata per inviare e ricevere dati da un server web. Come le richieste http GET e POST.
di Antonio Lamorgese
Axios è una libreria JavaScript per effettuare richieste HTTP, GET e POST, utilizzata per inviare e ricevere dati da un server che espone API web service. Axios supporta una vasta gamma di funzionalità come le richieste HTTP asincrone, l’intercettazione delle richieste e delle risposte, la gestione degli errori, la serializzazione automatica dei dati e altro ancora. Axios è molto popolare per la sua semplicità di utilizzo e la sua versatilità. Uno dei suoi punti di forza è la capacità di inviare richieste sincrone e asincrone.
Indice del Post...
Perchè utilizzare Axios invece di jQuery o fetch
Ci sono diversi motivi per cui Axios potrebbe essere preferito rispetto ad altre librerie o API native come jQuery o Fetch:
a) Semplicità di utilizzo: Axios è progettato per essere semplice e intuitivo da utilizzare, rendendolo una buona scelta per chi cerca una soluzione semplice per effettuare richieste HTTP.
b) Compatibilità con le moderne tecnologie: Axios è progettato per funzionare con le tecnologie moderne come React e Angular, rendendolo una buona scelta per progetti basati su queste tecnologie.
c) Supporto per le richieste asincrone: Axios supporta le richieste asincrone, il che significa che è possibile effettuare più richieste contemporaneamente e gestire la risposta una volta che sono disponibili.
d) Intercettazione delle richieste: Axios consente di intercettare e gestire facilmente le richieste e le risposte, il che è utile per la gestione dei token di autenticazione o per l’aggiunta di header personalizzati ad ogni richiesta.
e) Supporto per la serializzazione dei dati: Axios consente di serializzare automaticamente i dati inviati in una richiesta, il che rende molto più semplice l’invio di dati complessi.
In sintesi, Axios offre una serie di funzionalità avanzate che lo rendono una buona scelta per progetti che richiedono una soluzione potente e flessibile per le richieste HTTP.
Leggi anche: “Metti in azione ChatGPT con CURL da prompt dei comandi”
Come includere Axios in una pagina web
Prima di utilizzare Axios è necessario recuperare la libreria o sul suo sito web o sul repository ufficiale su GitHub. Successivamente puoi includere la libreria direttamente nella trua pagina web.
Per includere Axios in un file HTML, è possibile farlo in diversi modi, tra cui:
a) Utilizzare un CDN: è possibile includere Axios utilizzando un Content Delivery Network (CDN) come JSDelivr. Ecco come includere Axios tramite JSDelivr:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
b) Scaricare il file localmente: è possibile scaricare il file Axios dal sito ufficiale e quindi includerlo come file locale nel progetto. Ecco come includere Axios come file locale:
<script src="your_web_path/axios.min.js"></script>
Dopo aver incluso Axios, è possibile utilizzare la libreria come descritto negli esempi precedenti. Assicurati di includere Axios prima di qualsiasi codice che lo utilizzi.
Accesso a dati meteo con Axios
OpenWeatherMap.org è un servizio web che fornisce informazioni sul tempo attuale e previsioni del tempo in tutto il mondo. Gli utenti possono accedere a dati sul clima, come la temperatura, la velocità del vento, la direzione del vento, l’umidità, la pressione atmosferica e le condizioni meteorologiche attuali, attraverso un’API che possono integrare in altre applicazioni o siti web. Il servizio è gratuito per un uso limitato e a pagamento per un uso più professionale e ampio delle sue API.
Nota che questo esempio richiede di sostituire la stringa “YOUR_APP_ID” con un’API key valida. Per ottenere la tua API Key puoi registrarti al servizio cliccando su questo link. Inoltre, l’API OpenWeatherMap richiede di accettare i termini di servizio prima di utilizzare l’API key stessa.
Ecco un esempio di come utilizzare Axios per accedere ai dati meteo offerti dal servizio “OpenWeatherMap.org”:
// Definire l'URL dell'API di OpenWeatherMap const API_URL = 'https://api.openweathermap.org/data/2.5/weather?q=Rome,Italy&appid=YOUR_APP_ID'; <script> // Effettuare una richiesta GET all'API axios.get(API_URL) .then(response => { // Handle success console.log(response.data); }) .catch(error => { // Handle error console.error(error); }); </script>
In questo esempio, Axios invia una richiesta http GET all’URL specificato nella costante API_URL. Se la richiesta viene evasa con successo, i dati restituiti dall’API vengono stampati direttamente nella console del tuo browser web. Altrimenti, viene gestito l’errore stampando il messaggio di errore, anch’esso, in console. Ad ogni modo, se digiti nella barra degli indirizzi del browser l’URL passato ad Axios il browser stamperà a video la risposta inviatagli da OpenWeatherMap in formato JSON. La risposta avrà più o meno questo aspetto:
Conclusioni
In conclusione, Axios è una libreria JavaScript altamente flessibile e facile da utilizzare per effettuare richieste HTTP GET e POST a un’API. Ha molti vantaggi rispetto ad altre librerie come jQuery o fetch, come la gestione delle richieste e delle risposte asincrone, la gestione delle richieste interrotte, la gestione degli errori e la possibilità di inviare richieste in formato JSON.
Axios è supportato da una grande comunità di sviluppatori, che continuano a mantenerlo e a migliorarlo. Questo rende Axios una delle opzioni più affidabili e sicure per la gestione delle richieste HTTP.
In sintesi, Axios è un’ottima libreria da considerare per la gestione delle richieste HTTP in un’applicazione web. Con la sua flessibilità, affidabilità e facilità.
Desideri acquisire nuove competenze?
l'opportunità di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online
