Promise, Async/Await e Fetch API: chiamate API in JavaScript

Link copiato negli appunti

Quando sviluppiamo applicazioni web moderne, spesso dobbiamo interagire con API esterne per recuperare dati, inviare informazioni o eseguire operazioni su server remoti. JavaScript, essendo uno dei linguaggi principali per lo sviluppo front-end, ha diversi strumenti per semplificare tale processo. Tra questi strumenti, i più importanti per gestire le chiamate API sono:

Promise
Async/Await
Fetch API

In questa guida li utilizzaremo per gestire le chiamate API in JavaScript. Scopriremo il loro funzionamento e come integrarle facilmente nel nostro codice per creare applicazioni moderne e reattive.

Cos'è un'API e perché è importante?

Un'API (Application Programming Interface) è un insieme di regole e protocolli che consente a diverse applicazioni di comunicare tra di loro. Nel contesto del web, le API vengono spesso utilizzate per inviare e ricevere dati da un server remoto. Ad esempio, quando un'applicazione web recupera i dati da un database, spesso lo fa tramite un'API RESTful.

Le API sono quindi fondamentali per le applicazioni moderne. Consentono infatti di integrare funzionalità di terze parti o di interagire con i server per ottenere e manipolare informazioni.

Chiamate API asincrone in JavaScript

Le chiamate alle API sono operazioni asincrone. Ciò significa che quando invii una richiesta ad un server, il browser non aspetta che il server risponda per continuare a eseguire il resto del codice. In altre parole, JS continua ad eseguire il codice senza bloccare l'esecuzione, mentre attende la risposta dal server.

Nel passato, JavaScript utilizzava principalmente le callback per gestire queste operazioni asincrone. Tuttavia, con l'introduzione di Promise, Async/Await e la Fetch API, le cose sono diventate molto più facili e leggibili. Esploriamo ora questi strumenti.

Promise: il fondamento della gestione asincrona

Le Promise sono uno strumento in JavaScript che rappresenta il risultato di una operazione asincrona. Una Promise può essere in uno dei seguenti stati:

Pending
Fulfilled
Rejected

Una promise è un oggetto che può essere utilizzato per gestire il risultato di un'operazione asincrona, che può essere il successo o il fallimento dell'operazione.

Creazione di una Promise in JavaScript

Ecco un esempio base di una Promise che simula un'operazione asincrona, come una chiamata API:

const fetchData = new Promise((resolve, reject) => {
  const dataFetchedSuccessfully = true;  // Simula il successo di una chiamata API

  if (dataFetchedSuccessfully) {
    resolve("Dati recuperati con successo!");  // La promise è completata con successo
  } else {
    reject("Si è verificato un errore nel recupero dei dati!");  // La promise è rifiutata
  }
});
fetchData
  .then(response => console.log(response))  // Questo verrà eseguito se la promise è completata con successo
  .catch(error => console.error(error));   // Questo verrà eseguito se la promise è rifiutata

Nel codice precedente, creiamo una Promise che simula il recupero di dati. La funzione resolve viene chiamata se l'operazione ha successo, mentre reject viene chiamata se c'è un errore. Usando then() e catch() possiamo gestire rispettivamente il successo o il fallimento.

Fetch API: la nuova generazione di richieste HTTP

La Fetch API è un'API moderna e potente che ti permette di formulare richieste HTTP in modo semplice e con supporto nativo per le Promise. Con Fetch non hai più bisogno di usare oggetti XMLHttpRequest complessi come facevamo in passato. La Fetch API rende il processo di invio e ricezione dei dati via HTTP molto più leggibile.

Creare una richiesta GET con Fetch

Ecco un esempio di come utilizzare Fetch per fare una richiesta GET a un'API pubblica:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Errore nel recupero dei dati');
    }
    return response.json();  // Convertiamo la risposta in formato JSON
  })
  .then(data => console.log(data))  // Stampiamo i dati ricevuti
  .catch(error => console.error('Errore:', error));  // Gestiamo eventuali errori

In questo esempio, la funzione fetch() invia una richiesta GET all'API. La risposta viene poi elaborata in due passaggi:

verifichiamo se la risposta è OK (se il server ha restituito una risposta positiva).
Con il metodo response.json()

Nel caso in cui si verifichi un errore, come una risposta non valida, catturiamo l'errore con il metodo .catch().

Creare una richiesta POST con Fetch e JavaScript

Per inviare dati ad un server, possiamo utilizzare una richiesta POST. Ecco un esempio di come inviare dati in formato JSON:

onst newPost = {
  title: 'Nuovo Post',
  body: 'Contenuto del post',
  userId: 1
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newPost)  // Convertiamo l'oggetto in una stringa JSON
})
  .then(response => response.json())  // Otteniamo la risposta in formato JSON
  .then(data => console.log('Post creato:', data))
  .catch(error => console.error('Errore:', error));

In questo esempio, utilizziamo fetch() JSON.stringify()

Async/Await: una sintassi più semplice per lavorare con le Promise

Sebbene le Promise siano molto utili, l'uso del metodo .then() può rendere il codice difficile da leggere, specialmente quando abbiamo più operazioni asincrone da eseguire. Qui entra in gioco Async/Await, che fornisce una sintassi più lineare e più semplice per lavorare con le operazioni asincrone.

Creare una funzione asincrona con Async/Await con JavaScript

Una funzione dichiarata con async restituisce automaticamente una Promise. All'interno di questa funzione possiamo usare await per attendere il completamento di una Promise prima di procedere con il codice successivo.

Ecco un esempio di come riscrivere la nostra richiesta Fetch usando Async/Await:

async function fetchPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Errore nel recupero dei dati');
    }
    const data = await response.json();
    console.log(data);  // Dati ricevuti
  } catch (error) {
    console.error('Errore:', error);  // Gestiamo gli errori
  }
}
fetchPosts();

In questo esempio, abbiamo creato una funzione fetchPosts() dichiarata come async. All'interno della funzione usiamo await per attendere che la promessa restituita dalla fetch() venga risolta. Utilizzando try/catch, possiamo anche gestire eventuali errori in modo più pulito.

Vantaggi di Async/Await rispetto a Promises

Sintassi più chiara: con Async/Await il codice sembra più lineare e facile da leggere, simile a un flusso sincrono.
Gestione degli errori migliorata: gli errori vengono gestiti facilmente utilizzando il costrutto try/catch, invece di dover utilizzare .catch()
Meno annidamenti: le Promise con .then() pyramid of doom

Conclusione

Abbiamo analizzato come gestire le chiamate API in JavaScript utilizzando tre strumenti fondamentali: Promise, Async/Await e la Fetch API. Ognuno di questi ha i suoi vantaggi e viene utilizzato in contesti diversi. Tutti sono progettati per gestire le operazioni asincrone in modo più efficiente.

Promise è utile per gestire operazioni asincrone di base e permette una gestione lineare dei successi e degli errori.
Fetch API semplifica la comunicazione con il server e consente di inviare e ricevere dati via HTTP.
Async/Await fornisce una sintassi più leggibile e concisa per lavorare con le Promise, semplificando la gestione di operazioni asincrone multiple.

Questi strumenti ti permetteranno di scrivere codice JavaScript più pulito, efficiente e facile da gestire, rendendo le tue applicazioni web più robuste e reattive. Se desideri approfondire ulteriormente, puoi provare a combinare queste tecniche con altre funzionalità moderne, come i WebSockets o le API RESTful, per creare esperienze utente ancora più interattive.

Buon coding!

Indice lezioni