Mostrare caricamento, errore e contenuto

In parole semplici

Quando carichi dati, la pagina non deve restare muta. Deve poter dire: sto caricando, ho trovato i dati, oppure c’è stato un problema.

Questa lezione fa parte del modulo Dati, attese e richieste web. L’obiettivo del modulo è: Capire come gestire operazioni che non danno una risposta immediata.

Parole nuove

• stato: situazione attuale della pagina.
• errore: situazione in cui qualcosa non è andato come previsto.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una piccola dashboard che mostra dati caricati da una fonte esterna.

Esempio da copiare

const stato = document.querySelector("#stato");

async function avvia() {
  stato.textContent = "Caricamento...";
  try {
    const risposta = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const dati = await risposta.json();
    stato.textContent = dati.name;
  } catch (errore) {
    stato.textContent = "Non riesco a caricare i dati";
  }
}

avvia();

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea un paragrafo con id stato.
2. Mostra Caricamento prima di fetch.
3. Mostra un dato quando arriva.
4. Mostra un messaggio nel catch.
5. Prova a rompere l’indirizzo e osserva l’errore.

Controllo finale

Hai finito quando la pagina mostra sempre un messaggio chiaro.