Esercizi – Promises e Fetch API

Sezione 1: Promises

1. Crea una Promise che si risolve dopo 2 secondi con il messaggio 'Operazione completata'. Stampa il messaggio usando .then().

2. Crea una funzione checkNumber(num: number) che ritorna una Promise:

• Se num è pari → risolvi con il messaggio 'Numero pari'.
• Se num è dispari → rifiuta con un errore 'Numero dispari'. Testa la funzione con un numero pari e uno dispari usando .then() e .catch().

3. Crea una Promise che genera un numero casuale da 1 a 10. Usa una catena di .then() per:

• Stampare il numero.
• Calcolare il quadrato.
• Stampare il risultato finale.

4. Simula 3 operazioni asincrone (con setTimeout di durate diverse). Raccogli i risultati con Promise.all e stampali in ordine.

Sezione 2: Fetch API

5. Usa fetch per ottenere la lista dei post: https://jsonplaceholder.typicode.com/posts. Trasforma la risposta con .json(). Stampa a console i titoli (title) dei primi 5 post.

6. Scrivi una funzione fetchUser(id: number) che:

• Fa una richiesta GET a /users/:id.
• Se lo status non è 200, lancia un errore 'Utente non trovato'.
• Stampa a console il name dell’utente trovato.

7. Crea una funzione createPost(title: string, body: string) che invia una richiesta POST a /posts. Nel body invia un oggetto { title, body, userId: 1 }. Stampa la risposta restituita dal server.

8. Crea una semplice pagina con un <ul id="todo-list"></ul>. Usa fetch su https://jsonplaceholder.typicode.com/todos?_limit=5. Inserisci nel DOM i titoli delle attività (title).

Sezione 3: Challenge combinato (Promises + Fetch)

9. Crea due fetch su https://jsonplaceholder.typicode.com/posts e https://jsonplaceholder.typicode.com/comments. Usa Promise.race per stampare la risposta che arriva prima.

10. Fai una richiesta GET a /users/1 per ottenere i dati dell’utente. Con l’id dell’utente fai subito una seconda fetch a /posts?userId=1 per prendere i suoi post. Stampa il nome dell’utente e i titoli dei suoi post.

Obiettivi didattici

• Capire cosa sono le Promises e come gestire successo/errore.
• Esercitarsi con .then(), .catch() e combinatori (Promise.all, Promise.race).
• Saper usare Fetch API per richieste reali (GET e POST).
• Integrare la parte asincrona con il DOM.