Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

fix 11.tutorial

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-18 09:35:38 +01:00
parent 5a08bcbc98
commit 9da6d83c65
2 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
javascript/11_API/tutorial/index.html
View File

@@ -36,7 +36,7 @@
[
{
title: "1. Il concetto di Attesa (Simulazione)",
description: "Le API sono lente. Simuliamo un ritardo di 2 secondi prima di mostrare il messaggio.",
description: "Le API sono lente. Simuliamo un ritardo di 1 secondo prima di mostrare il messaggio.",
outputLabel: "Output Step 1:"
},
{
@@ -50,22 +50,27 @@
outputLabel: "Dati ricevuti:"
},
{
title: "4. Estrazione Dati (JSON)",
title: "4. Risposta Grezza (Raw Response)",
description: "La risposta di fetch è un oggetto complesso. Vediamo cosa contiene davvero.",
outputLabel: "Oggetto Response:"
},
{
title: "5. Estrazione Dati (JSON)",
description: "La risposta grezza non basta. Dobbiamo convertirla ed estrarre il titolo.",
outputLabel: "Titolo del Post:"
},
{
title: "5. Gestione Errori (Try/Catch)",
title: "6. Gestione Errori (Try/Catch)",
description: "Proviamo a chiamare un sito che non esiste per vedere se il codice sopravvive.",
outputLabel: "Stato operazione:"
},
{
title: "6. Lavorare con le Liste (Array)",
title: "7. Lavorare con le Liste (Array)",
description: "Scarichiamo 10 utenti e mostriamo solo i loro nomi.",
outputLabel: "Elenco Utenti:"
},
{
title: "7. Invio Dati (POST)",
title: "8. Invio Dati (POST)",
description: "Simuliamo l'invio di un nuovo post al server.",
outputLabel: "Risposta Server:"
}

48
javascript/11_API/tutorial/script.js
View File

@@ -2,7 +2,7 @@
// NON TOCCARE
// Funzioni di supporto per il tutorial
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // Simula server lento
const delay = (ms) => new Promise(res => setTimeout(res, ms)); // Simula server lento
// Funzione pricipale del tutorial
async function eseguiTutorial() {
@@ -14,8 +14,8 @@ async function eseguiTutorial() {
* La keyword 'await' serve a dire "Fermati qui finché l'operazione non finisce".
*/
// Questa funzione simula un server che ci mette 1 secondo a rispondere
// TODO: Aggiungi 'await' prima di wait(1000) per far funzionare l'attesa.
wait(1000);
// TODO: Aggiungi 'await' prima di delay(1000) per far funzionare l'attesa.
delay(1000);
mostraOutput(1, "Operazione completata!");
@@ -24,7 +24,7 @@ async function eseguiTutorial() {
* === 2. Async/Await ===
* Per usare 'await', la funzione deve essere dichiarata come 'async'.
* Questo è un modo elegante per scrivere codice asincrono.
* Crea una funzione async chiamata 'aspetta2Secondi' che aspetta 2 secondi (usa la funzione wait).
* Crea una funzione async chiamata 'aspetta2Secondi' che aspetta 2 secondi (usa la funzione delay).
* Poi stampa "2 secondi sono passati!" e mostra il risultato usando mostraOutput(2, "2 secondi sono passati!").
* Chiama la funzione subito dopo averla definita.
*/
@@ -38,7 +38,7 @@ async function eseguiTutorial() {
* Usiamo `fetch(url)` per chiamare un server vero.
*/
// TODO: crea una costante 'urlBase' con l'indirizzo dettato a lezione
// TODO: Esegui una fetch a quell'URL.
// TODO: Esegui una fetch a urlBase + "/users/1" e salva la risposta in 'rispostaGrezza'.
// Ricorda di mettere 'await' davanti a fetch!
const urlBase = "https://sito-finto.com";
const rispostaGrezza = null;
@@ -48,7 +48,23 @@ async function eseguiTutorial() {
/**
* ===========================================
* === 4. Estrarre il JSON ===
* === 4. Controllare la Risposta ===
* Prima di estrarre i dati, dobbiamo controllare se la risposta è OK.
* La proprietà 'ok' è true se status code è 200-299.
*/
let statoRisposta = "";
if (rispostaGrezza) {
//TODO: mostrare il codice e il suo testo
statoRisposta = "";
}
mostraOutput(4, statoRisposta);
/**
* ===========================================
* === 5. Estrarre il JSON ===
* La risposta grezza contiene status code, headers, ecc.
* A noi servono i dati. Dobbiamo usare il metodo .json().
* ANCHE .json() è asincrono e vuole 'await'.
@@ -63,12 +79,12 @@ async function eseguiTutorial() {
nomeUtente = "NOME MANCANTE";
}
mostraOutput(4, nomeUtente);
mostraOutput(5, nomeUtente);
/**
* ===========================================
* === 5. Gestione Errori (Try / Catch) ===
* === 6. Gestione Errori (Try / Catch) ===
* Se il server è giù o l'URL è sbagliato, fetch esplode.
* Usiamo try/catch per gestire il problema.
*/
@@ -76,15 +92,15 @@ async function eseguiTutorial() {
// TODO: Prova a fare una fetch a un URL sbagliato (es. 'https://sito-finto.com')
// Ricorda l'await!
mostraOutput(5);
mostraOutput(6);
} catch (errore) {
mostraOutput(5, errore.message);
mostraOutput(6, errore.message);
}
/**
* ===========================================
* === 6. Liste di Dati (Array) ===
* === 7. Liste di Dati (Array) ===
* Spesso riceviamo un array di oggetti. Dobbiamo ciclarlo.
*/
// Scarichiamo 5 utenti
@@ -95,15 +111,15 @@ async function eseguiTutorial() {
// TODO: Usa .map() o un ciclo for per creare un array contenente SOLO i nomi degli utenti.
const soloNomi = [];
mostraOutput(6, soloNomi);
mostraOutput(7, soloNomi);
} catch (errore) {
mostraOutput(6, "");
mostraOutput(7, "");
}
/**
* ===========================================
* === 7. Inviare Dati (POST) ===
* === 8. Inviare Dati (POST) ===
* Per inviare dati, fetch accetta un secondo parametro di opzioni.
*/
// TODO: Completa l'oggetto con i dati mancanti
@@ -127,8 +143,8 @@ async function eseguiTutorial() {
});
const risultatoInvio = await rispInvio.json();
mostraOutput(7, risultatoInvio);
mostraOutput(8, risultatoInvio);
} catch (errore) {
mostraOutput(7, "");
mostraOutput(8, "");
}
}