CodeStart.it
Corsi JavaScript Fetch e JSON
King · Applica · Capitolo 15 di 17

Fetch e JSON

JavaScriptLettura + laboratorioCorso gratuito
Che cosa imparerai

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.

Codice di esempio · JavaScript
const risposta = '{"corso":"JavaScript","lezioni":16}';
const dati = JSON.parse(risposta);
console.log(dati.corso);
console.log(dati.lezioni);
Risultato previsto
JavaScript
16

Come leggere questo esempio

  1. Prima di eseguire, prova a prevedere il risultato dell’esempio.
  2. Spiega con parole tue in che modo “fetch e json” risolve un problema concreto.
  3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
  4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
Errore frequente
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 · javascript

L’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
Codice di esempio · JavaScript
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?

Seleziona una risposta

Promemoria

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.

← Capitolo precedente