Come sviluppatore ampiamente autodidatta, ho messo alla prova il vasto mondo dei tutorial gratuiti e a pagamento su internet. Qualcosa che vedo spuntare ancora e ancora nei tutorial che eseguono richieste HTTP è l’uso di una libreria JavaScript chiamata Axios. Volevo capire perché una così vasta gamma di educatori di sviluppo web facessero uso di questa libreria apparentemente poco appariscente. Così ho deciso di scavare per fornire una spiegazione molto semplice e diretta di ciò che Axios offre e perché (probabilmente) vale la pena usarlo.
Cosa fa
In poche parole, Axios è una libreria Javascript usata per fare richieste HTTP da node.js o XMLHttpRequests dal browser che supporta anche l’API ES6 Promise. Bene, quindi da questo si deduce che fa qualcosa che possiamo già fare e che è stato recentemente migliorato in modo significativo… Quindi perché preoccuparsi?
Cosa mira a migliorare: .fetch()
Fetch utilizza un processo a due fasi quando si tratta di dati JSON; dopo aver fatto una richiesta iniziale è necessario chiamare il metodo .json() sulla risposta per ricevere l’oggetto dati effettivo. Se dovessi avere una richiesta di fetch per ottenere un oggetto di autisti rilevanti per la mia app di carpooling, potrei avere qualcosa come il seguente:
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res)
Questo restituirebbe una promessa pendente e un oggetto di risposta che mi fa sapere che la mia richiesta ha avuto successo, ma dove sono i miei dati? Dobbiamo ricordarci di passare la nostra risposta anche al metodo .json().
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`).then(res => res.json())
Ora questo non è un grosso problema, come molte cose si riduce alla memorizzazione della sintassi. Ma come sviluppatori, siamo contemporaneamente le creature più pigre e più efficienti del pianeta – quindi qualsiasi tipo di stenografia o risparmio di tempo è degno di considerazione, entra in Axios.
Migliore gestione degli errori
C’è del lavoro extra che dobbiamo fare da parte nostra (di nuovo, si potrebbe dire che è solo una questione di memorizzazione della sintassi) per il risultato desiderato quando si tratta di registrare correttamente gli errori di risposta con .fetch(). MDN spiega:
Una promessa
fetch()rifiuterà con unTypeErrorquando si incontra un errore di rete o CORS è mal configurato sul lato server, anche se questo di solito significa problemi di autorizzazione o simili – un 404 non costituisce un errore di rete, per esempio.
Assumiamo che ci sia qualcosa di sbagliato con la nostra variabile baseUrl. L’aspettativa dell’output per il seguente blocco di codice sarebbe errore, ma invece è ok. Perché questo?
const baseUrl = 'http://localhost:3000/api/v1'fetch(`${baseUrl}/drivers`)
.catch(error => console.log('ok'))
.then(res => console.log('error'));
Si è scoperto che fetch() rifiuta le promesse solo in situazioni di errore di rete relativamente rare come una mancata ricerca DNS. Fortunatamente fetch() fornisce un semplice flag ok che indica se il codice di stato di una risposta è nell’intervallo di successo o meno. Generalmente quello che succede è che finirai per scrivere una funzione di gestione degli errori unica per tutte le chiamate fetch().
Installazione di Axios
Oggi è facile come una torta (Mmm.. rabarbaro), io preferisco npm. Nella radice della cartella del tuo progetto apri il terminale, esegui npm install axios e sei a posto. Ora per ottenere la stessa richiesta di fetch che abbiamo eseguito prima, possiamo invocare axios.get() al posto del nostro metodo fetch in questo modo:
const baseUrl = 'http://localhost:3000/api/v1'axios.get(`${baseUrl}/drivers`).then(res => res)
Presto! Usando axios eliminiamo la necessità di passare i risultati della richiesta HTTP al metodo .json(). Axios restituisce semplicemente l’oggetto dati che ci si aspetta subito. Inoltre, qualsiasi tipo di errore con una richiesta HTTP eseguirà con successo il blocco .catch() proprio fuori dalla scatola. Ecco un breve riepilogo di tutte le sue caratteristiche principali, incluse alcune che non ho coperto direttamente dalla pagina GitHub:
- Fare XMLHttpRequests dal browser
- Fare richieste http da node.js
- Supporta l’API Promise
- Intercetta richiesta e risposta
- Trasforma i dati di richiesta e risposta
- Annulla le richieste
- Trasforma automaticamente i dati JSON
- Supporto lato client per la protezione contro XSRF
In sintesi, Axios è un miglioramento della qualità della vita più che altro. Ma fare molti piccoli aggiustamenti incrementali di qualità della vita al proprio flusso di lavoro può migliorare drasticamente la qualità e la velocità dello sviluppo.