Che cos'è un'API e come interagiamo con essa?

Nello sviluppo web, le API permettono al codice JavaScript di interagire con servizi esterni, come il recupero di dati da un server, l'invio di dati di un modulo o l'integrazione di servizi di terze parti.

Nelle applicazioni JavaScript moderne, le API vengono spesso utilizzate per:

• Recuperare dati da un server (ad esempio, ottenere dati meteo, articoli di notizie o dettagli di prodotti);
• Inviare dati a un server (ad esempio, invio di un modulo o salvataggio delle preferenze utente);
• Lavorare con servizi di terze parti (ad esempio, Google Maps, Twitter API, gateway di pagamento).

Interagiamo con le API inviando richieste HTTP a un endpoint API, e il server risponde con dati, tipicamente in formato JSON.

Invio di richieste HTTP utilizzando fetch()

La funzione fetch() rappresenta un metodo moderno per effettuare richieste di rete in JavaScript. Restituisce una Promise, che si risolve al completamento della richiesta.

Questo esempio illustra come effettuare una richiesta HTTP GET a un'API utilizzando fetch(). La funzione fetchData invia una richiesta all'endpoint specificato (https://jsonplaceholder.typicode.com/posts/1). Una volta ricevuta la risposta, response.json() analizza i dati JSON. Il titolo del post viene quindi estratto dai dati analizzati e visualizzato nel paragrafo HTML.

Gestione delle risposte API: Analisi del JSON e verifica dello stato della risposta

Dopo aver inviato una richiesta API, è importante verificare se la richiesta è andata a buon fine e gestire correttamente la risposta. Nella maggior parte dei casi, i dati restituiti da un'API sono in formato JSON, quindi è necessario analizzarli utilizzando response.json().

Inoltre, è sempre consigliabile controllare lo stato della risposta per assicurarsi che la richiesta sia stata eseguita correttamente (codice di stato 200–299).

Questo esempio dimostra come gestire lo stato della risposta di una richiesta API. La funzione fetchAndCheckStatus invia una richiesta a un endpoint API, quindi verifica se la risposta ha avuto successo utilizzando response.ok, che restituisce true per i codici di stato compresi tra 200 e 299. Se la richiesta ha successo, i dati JSON vengono analizzati e visualizzati. Se la richiesta fallisce, il codice di errore viene mostrato nell'HTML.

Gestione degli errori con le API e gestione dei guasti di rete

Quando si lavora con le API, è fondamentale gestire potenziali errori come:

• Guasti di rete: il server potrebbe essere irraggiungibile a causa di problemi di rete;
• Risposte non valide: l'API potrebbe restituire un errore (ad esempio, 404 Not Found o 500 Server Error).

È possibile gestire gli errori utilizzando try...catch insieme a fetch() per gestire sia gli errori di rete che quelli di risposta dell'API.

Questo esempio mostra come gestire efficacemente gli errori delle API. La funzione fetchWithErrorHandling utilizza try...catch per gestire sia gli errori di rete sia le risposte API non valide. Se la richiesta all'URL non valido fallisce, oppure se il codice di stato della risposta è al di fuori dell'intervallo 200–299, viene generato un errore con un messaggio specifico. Il blocco catch visualizza quindi il messaggio di errore nell'HTML. Questo metodo garantisce che eventuali problemi con la chiamata API, come un endpoint errato o problemi di connettività, vengano gestiti in modo appropriato e comunicati chiaramente all'utente.