Oltre alla funzione nativa fetch(), sono disponibili diverse librerie di terze parti per effettuare richieste HTTP in JavaScript. Una delle librerie più popolari è Axios ( Documentazione Axios). Queste librerie offrono funzionalità aggiuntive e vantaggi che possono semplificare il lavoro con le API e migliorare la leggibilità del codice.

Perché utilizzare Axios o altre librerie invece di fetch() nativo?

Sebbene l'API fetch() sia potente, presenta alcune limitazioni che librerie di terze parti come Axios risolvono:

• Parsing automatico del JSON: Axios analizza automaticamente le risposte JSON, mentre con fetch() è necessario chiamare manualmente response.json();
• Timeout: Axios consente di impostare timeout per le richieste, funzionalità non supportata nativamente da fetch();
• Interceptor di richiesta e risposta: Axios fornisce interceptor che permettono di eseguire funzioni prima dell'invio di una richiesta o dopo la ricezione di una risposta, utili per aggiungere token di autenticazione o registrare le richieste;
• Sintassi più semplice: Axios offre una sintassi più semplice e coerente per effettuare richieste e gestire le risposte;
• Supporto per browser meno recenti: Axios include il supporto per browser meno recenti che potrebbero non supportare completamente l'API fetch() nativa.

Utilizzo di base di Axios

Axios offre una sintassi semplice per effettuare richieste GET e POST. Restituisce Promise, proprio come fetch(), ma gestisce automaticamente alcune operazioni ripetitive come il parsing del JSON.

Richiesta GET con Axios

Questo esempio illustra l'utilizzo di Axios per una richiesta GET. La funzione getPostWithAxios richiama axios.get() per recuperare dati da un endpoint API (/posts/1). Axios semplifica il processo analizzando automaticamente la risposta JSON, eliminando la necessità di una chiamata .json() separata. Il blocco try...catch gestisce eventuali errori, mostrando nel codice HTML il titolo del post oppure un messaggio di errore.

Richiesta POST con Axios

Questo esempio illustra una richiesta POST utilizzando Axios per inviare dati a un'API. La funzione sendPostWithAxios richiama axios.post() con l'endpoint dell'API (/posts) e i dati per un nuovo post, inclusi title, body e userId. Axios invia automaticamente i dati come JSON, semplificando il processo. Il blocco try...catch gestisce eventuali errori, mostrando nel codice HTML il titolo del post creato oppure un messaggio di errore.

Gestione degli errori con Axios

Axios offre un meccanismo semplice per la gestione degli errori. Se la richiesta fallisce (ad esempio, per un problema di rete o un errore del server), Axios genera automaticamente un errore, che può essere gestito tramite try...catch.

Questo esempio illustra la gestione degli errori con Axios. La funzione getInvalidPost tenta di recuperare dati da un endpoint inesistente utilizzando axios.get(). Quando la richiesta fallisce, Axios genera automaticamente un errore. Il blocco try...catch intercetta questo errore, mostrando il messaggio di errore nell'HTML.

Funzionalità aggiuntive e vantaggi di Axios

Analisi di alcune funzionalità aggiuntive di Axios.

Intercettori di richiesta e risposta

Axios consente di intercettare richieste e risposte per modificarle prima che vengano elaborate. Questa funzionalità è utile per aggiungere token di autenticazione, registrare richieste o gestire errori globali.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Supporto per Timeout

Axios consente di impostare timeout per le richieste, garantendo che la richiesta non rimanga in sospeso indefinitamente.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Gestione degli Errori Semplificata

Axios genera automaticamente errori quando lo stato della risposta è al di fuori dell'intervallo 2xx, consentendo di gestire i fallimenti in modo standardizzato.

Supporto per Browser

Axios funziona su tutti i browser moderni e fornisce polyfill per i browser più datati, rendendolo un'opzione più versatile per alcuni progetti.