`
Ciao a tutti! Oggi voglio condividere con voi un modo semplice e potente per leggere i dati da un’API usando il metodo fetch di Javascript. Fetch è una funzione nativa di Javascript che ci permette di fare richieste HTTP in modo asincrono, cioè senza bloccare il flusso di esecuzione del nostro codice. In questo post vi mostrerò come usare fetch per ottenere i dati da un’API pubblica e come gestire le possibili risposte, sia in caso di successo che di errore. Siete pronti? Allora cominciamo!
Cos’è un’API?
Un’API (Application Programming Interface) è un insieme di regole e convenzioni che definiscono come due applicazioni possono comunicare tra loro. In pratica, un’API è un modo per esporre dei dati o delle funzionalità di un’applicazione ad altre applicazioni, in modo standardizzato e sicuro. Ad esempio, se vogliamo accedere ai dati meteorologici di una determinata città, possiamo usare un’API che ci fornisce queste informazioni in formato JSON (JavaScript Object Notation), che è un formato leggibile sia per le macchine che per gli umani.
Come usare fetch per leggere un’API?
Per usare fetch, dobbiamo passare come primo parametro l’URL dell’API che vogliamo leggere. Questo URL può contenere anche dei parametri aggiuntivi, come ad esempio la chiave di accesso o il formato dei dati richiesti. Il secondo parametro è opzionale e ci permette di specificare alcune opzioni per la richiesta, come il metodo HTTP (GET, POST, PUT, DELETE…), le intestazioni (headers), il corpo (body) e altre impostazioni. Per semplicità, in questo esempio useremo solo il primo parametro e faremo una richiesta GET, che è il metodo più comune per leggere i dati da un’API.
Esempio: Fetch API JavaScript
fetch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API example</title>
</head>
<body>
<ul>
</ul>
<script src="js/fetch.js"></script>
</body>
</html>
fetch.js
const url = "https://jsonplaceholder.typicode.com/users";
const ul = document.querySelector('ul');
getUsers();
function getUsers(){
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data);
renderUsers(data);
});
}
function renderUsers(users){
console.log(users);
users.forEach(user =>{
console.log(user);
ul.innerHTML += '<li>'+ user.id + ' ' + user.name + '</li>';
});
}
Il codice recupera una lista di utenti da un servizio web e li visualizza in un elenco non ordinato (ul) sulla pagina HTML. Inizia dichiarando l’URL del servizio web e selezionando l’elemento ul. Poi chiama la funzione getUsers(), che invia una richiesta HTTP GET all’URL. Quando la risposta viene ricevuta, viene convertita in un oggetto JavaScript e passata alla funzione renderUsers(). Questa funzione prende un array di utenti come input e, per ogni utente, aggiunge un nuovo elemento li all’elemento ul nella pagina HTML. Ogni elemento li contiene l’ID e il nome dell’utente.
