From c5b16b7e022dab1a69e35397c5bed8eb4a53d33e Mon Sep 17 00:00:00 2001 From: Berack96 Date: Mon, 16 Feb 2026 22:19:12 +0100 Subject: [PATCH] fix api tutorial --- javascript/11_API/tutorial/index.html | 15 ++++-- javascript/11_API/tutorial/script.js | 74 +++++++++++++++++---------- 2 files changed, 57 insertions(+), 32 deletions(-) diff --git a/javascript/11_API/tutorial/index.html b/javascript/11_API/tutorial/index.html index 313c314..4cc3f54 100644 --- a/javascript/11_API/tutorial/index.html +++ b/javascript/11_API/tutorial/index.html @@ -40,27 +40,32 @@ outputLabel: "Output Step 1:" }, { - title: "2. Prima chiamata Fetch (GET)", + title: "2. Async/Await", + description: "Per usare 'await', la funzione deve essere dichiarata come 'async'.", + outputLabel: "Output Step 2:" + }, + { + title: "3. Prima chiamata Fetch (GET)", description: "Recuperiamo un oggetto JSON reale da un server pubblico.", outputLabel: "Dati ricevuti:" }, { - title: "3. Estrazione Dati (JSON)", + title: "4. Estrazione Dati (JSON)", description: "La risposta grezza non basta. Dobbiamo convertirla ed estrarre il titolo.", outputLabel: "Titolo del Post:" }, { - title: "4. Gestione Errori (Try/Catch)", + title: "5. Gestione Errori (Try/Catch)", description: "Proviamo a chiamare un sito che non esiste per vedere se il codice sopravvive.", outputLabel: "Stato operazione:" }, { - title: "5. Lavorare con le Liste (Array)", + title: "6. Lavorare con le Liste (Array)", description: "Scarichiamo 10 utenti e mostriamo solo i loro nomi.", outputLabel: "Elenco Utenti:" }, { - title: "6. Invio Dati (POST)", + title: "7. Invio Dati (POST)", description: "Simuliamo l'invio di un nuovo post al server.", outputLabel: "Risposta Server:" } diff --git a/javascript/11_API/tutorial/script.js b/javascript/11_API/tutorial/script.js index a76cec4..ccc6a1f 100644 --- a/javascript/11_API/tutorial/script.js +++ b/javascript/11_API/tutorial/script.js @@ -13,16 +13,28 @@ async function eseguiTutorial() { * JavaScript di solito corre veloce. Con i server, deve aspettare. * La keyword 'await' serve a dire "Fermati qui finché l'operazione non finisce". */ - // Questa funzione simula un server che ci mette 2 secondi a rispondere + // Questa funzione simula un server che ci mette 1 secondo a rispondere // TODO: Aggiungi 'await' prima di wait(2000) per far funzionare l'attesa. - wait(2000); + wait(1000); mostraOutput(1, "Operazione completata!"); - /** * =========================================== - * === 2. Fetch Base (GET) === + * === 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). + * Poi stampa "2 secondi sono passati!" e mostra il risultato usando mostraOutput(2, "2 secondi sono passati!"). + * Chiama la funzione subito dopo averla definita. + */ + + mostraOutput(2, ""); + + + /** + * =========================================== + * === 3. Fetch Base (GET) === * Usiamo `fetch(url)` per chiamare un server vero. */ // TODO: crea una costante 'urlBase' con l'indirizzo dettato a lezione @@ -31,12 +43,12 @@ async function eseguiTutorial() { const urlBase = "https://sito-finto.com"; const rispostaGrezza = null; - mostraOutput(2, rispostaGrezza ? "Risposta ricevuta (Response Object)" : ""); + mostraOutput(3, rispostaGrezza ? "Risposta ricevuta (Response Object)" : ""); /** * =========================================== - * === 3. Estrarre il JSON === + * === 4. 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'. @@ -51,12 +63,12 @@ async function eseguiTutorial() { nomeUtente = "NOME MANCANTE"; } - mostraOutput(3, nomeUtente); + mostraOutput(4, nomeUtente); /** * =========================================== - * === 4. Gestione Errori (Try / Catch) === + * === 5. Gestione Errori (Try / Catch) === * Se il server è giù o l'URL è sbagliato, fetch esplode. * Usiamo try/catch per gestire il problema. */ @@ -64,31 +76,35 @@ async function eseguiTutorial() { // TODO: Prova a fare una fetch a un URL sbagliato (es. 'https://sito-finto.com') // Ricorda l'await! - mostraOutput(4); + mostraOutput(5); } catch (errore) { - mostraOutput(4, errore.message); + mostraOutput(5, errore.message); } /** * =========================================== - * === 5. Liste di Dati (Array) === + * === 6. Liste di Dati (Array) === * Spesso riceviamo un array di oggetti. Dobbiamo ciclarlo. */ // Scarichiamo 5 utenti - const responseUtenti = await fetch(`${urlBase}/users?_limit=5`); - const listaUtenti = await responseUtenti.json(); + try { + const responseUtenti = await fetch(`${urlBase}/users?_limit=5`); + const listaUtenti = await responseUtenti.json(); - // TODO: Usa .map() o un ciclo for per creare un array contenente SOLO i nomi degli utenti. - // Esempio: const nomi = listaUtenti.map(u => u.name); - const soloNomi = []; + // TODO: Usa .map() o un ciclo for per creare un array contenente SOLO i nomi degli utenti. + // Esempio: const nomi = listaUtenti.map(u => u.name); + const soloNomi = []; - mostraOutput(5, soloNomi); + mostraOutput(6, soloNomi); + } catch (errore) { + mostraOutput(6, ""); + } /** * =========================================== - * === 6. Inviare Dati (POST) === + * === 7. Inviare Dati (POST) === * Per inviare dati, fetch accetta un secondo parametro di opzioni. */ // TODO: Completa l'oggetto con i dati mancanti @@ -102,14 +118,18 @@ async function eseguiTutorial() { avatar: "https://ui-avatars.com/api/?name=Nome+Cognome" }; - // TODO: Completa la fetch. - // Aggiungi method: 'POST' - // Aggiungi headers: { 'Content-Type': 'application/json' } - // Aggiungi body: JSON.stringify(nuovoUtente) - const rispInvio = await fetch(`${urlBase}/posts`, { - - }); + try { + // TODO: Completa la fetch. + // Aggiungi method: 'POST' + // Aggiungi headers: { 'Content-Type': 'application/json' } + // Aggiungi body: JSON.stringify(nuovoUtente) + const rispInvio = await fetch(`${urlBase}/posts`, { + + }); - const risultatoInvio = await rispInvio.json(); - mostraOutput(6, risultatoInvio); + const risultatoInvio = await rispInvio.json(); + mostraOutput(7, risultatoInvio); + } catch (errore) { + mostraOutput(7, ""); + } } \ No newline at end of file