Fetch e JSON
Le applicazioni web spesso scambiano dati JSON tramite richieste HTTP.
1. Il concetto, spiegato da zero
Le applicazioni web spesso scambiano dati JSON tramite richieste HTTP.
fetch invia una richiesta e restituisce una Promise; response.ok controlla lo stato HTTP e response.json() legge il contenuto. Per il laboratorio, simuliamo la risposta senza chiamare servizi esterni.
2. Un esempio ragionato
Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.
const risposta = '{"corso":"JavaScript","lezioni":16}';
const dati = JSON.parse(risposta);
console.log(dati.corso);
console.log(dati.lezioni);JavaScript 16
Come leggere questo esempio
- Prima di eseguire, prova a prevedere il risultato dell’esempio.
- Spiega con parole tue in che modo “fetch e json” risolve un problema concreto.
- Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
- Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
La risposta HTTP 404 non rifiuta automaticamente la Promise di fetch: controlla response.ok.
3. Adesso tocca a te
Obiettivo dell’esercizio: Interpreta una risposta JSON e mostra due proprietà.
Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.
Laboratorio: metti alla prova il codice
JAVASCRIPT · javascriptL’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.
Output / esito del controllo
Il risultato comparirà qui.
Mostra la soluzione di riferimento
const risposta = '{"corso":"JavaScript","lezioni":16}';
const dati = JSON.parse(risposta);
console.log(dati.corso);
console.log(dati.lezioni);Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.
4. Verifica e ripasso
Quiz: hai capito il concetto?
Quale delle seguenti affermazioni è corretta per questo capitolo?
fetch invia una richiesta e restituisce una Promise; response.ok controlla lo stato HTTP e response.json() legge il contenuto. Per il laboratorio, simuliamo la risposta senza chiamare servizi esterni.
5. Come proseguire
Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.