In Javascript è molto importante conoscere come effettuare delle richieste HTTP e ricevere dinamicamente dati da un server remoto.
Javascript fornisce una serie di strumenti ed alcune librerie open source con i quali è possibile interagire con delle API.
In questo articolo andremo ad analizzare i seguenti metodi:
- XMKHttpRequest
- fetch
- Axios
- jQuery
Per tutte le chiamate che faremo in questo articolo prenderemo i dati da un servizio che si chiama JSONPlaceholder che ci fornisce dati di esempio da un server remoto.
1. XMLHttpRequest
Il primo metodo che andiamo a vedere è forse il più antico di tutta la lista citata sopra. Prima dell’avvento di ES 6 questo era l’unico modo per poter chiamare una API
Da notare come di default la risposta ci arrivi in formato stringa, dobbiamo quindi per forza trasformarla in JSON utilizzando l’istruzione
JSON.parse(request.response)XMLHttpRequest è stato ufficialmente deprecato in ES 6 in favore di fetch.
2. Fetch
Fetch ti consente di effettuare chiamate HTTP request in modo simile a quanto ci forniva XMLHttpRequest ma in modo più efficace.
Come possiamo notare, fetch lavora con le Promise di Javascript.
3. Axios
Axios è una libreria open-source per effettuare richieste HTTP, lavora anch’essa con le Promise e può essere usata in progetti Javascript “puri”, React, vue, Angular ecc…
Questa libreria supporta la maggior parte di tutti i browser più moderni.
Per installare Axios lanciare uno dei seguenti comandi
Fatto ciò possiamo includere la libreria nel nostro HTML
Attenzione, il percorso alla libreria potrebbe essere differente nel caso in cui la vostra pagina HTML si trovi in sottodirectory nel tuo progetto.
Se non vuoi scaricare la libreria c’è la possibilità di includerla tramite CDN
Da adesso possiamo effettuare le nostre chiamate API, dai un occhio allo script di esempio qui sotto
4. jQuery
jQuery è una famosissima libreria Javascript che ha l’obiettivo di semplificare molte operazioni che con Javascript “normale” richiederebbero una sintassi lunga o comunque complicata. In Particolare esiste un metodo chiamato $.ajax() che si occupa delle richieste HTTP.
L’ esempio qui sotto include jQuery tramite CDN e successivamente esegue la chiamata.
La risposta ci arriva in formato JSON pertanto non saranno necessari ulteriori parsing per poter gestirei dati che ci sono arrivati dal server.
5. Conclusioni
Ti ho mostrato brevemente i modi per effettuare chiamate all’ API in Javascript. Conosci metodi che non ho elencato? Hai dubbi o domande?
Non esitare a lasciare un commento qui sotto.
Ciao e alla prossima 🙂
