Richieste HTTP con fetch

Il metodo fetch() permette di effettuare richieste HTTP dal browser verso un server. È uno strumento moderno che restituisce una Promise, quindi funziona in modo asincrono. Le richieste HTTP possono essere di diversi tipi, tra cui GET, POST, PUT, PATCH e DELETE, a seconda dell’operazione da eseguire sui dati. Le più comuni sono GET, utilizzata per recuperare dati, e POST, usata per inviare dati al server. La differenza principale tra GET e POST è che con GET i dati vengono passati nell’URL (quindi visibili), mentre con POST viaggiano nel corpo della richiesta, risultando più adatto per l’invio di informazioni sensibili.

Esempio di richiesta GET con fetch()

La richiesta GET serve per l'invio e recupero dati da un server o da un’API. Nell’esempio seguente preleviamo un post di esempio da un’API pubblica di test.

Codice Esempio: GET con fetch

CODE: Javascript

1. fetch('https://jsonplaceholder.typicode.com/posts/1')

2.   .then(response => response.json()) // convertiamo la risposta in JSON

3.   .then(data => {

4.     console.log("Titolo del post:", data.title);

5.     console.log("Contenuto:", data.body);

6.   })

7.   .catch(error => {

8.     console.error("Errore nella richiesta GET:", error);

9.   });

Risultato: nella console verranno stampati il titolo e il contenuto del post ottenuto dall’API. La richiesta è in sola lettura, quindi non modifica nulla lato server.

Esempio di richiesta POST con fetch()

La richiesta POST serve per l'invio e recupero dati da un server, ad esempio quando si compila un form. È più sicura del GET perché i dati non compaiono nell’URL. Nell’esempio seguente creiamo un nuovo post.

Codice Esempio: POST con fetch

CODE: Javascript

1. fetch('https://jsonplaceholder.typicode.com/posts', {

2.   method: "POST",

3.   headers: {

4.     "Content-Type": "application/json"

5.   },

6.   body: JSON.stringify({

7.     title: "Nuovo post",

8.     body: "Questo è il contenuto del post",

9.     userId: 1

10.   })

11. })

12.   .then(response => response.json()) // il server risponde con i dati ricevuti

13.   .then(data => {

14.     console.log("Post creato con ID:", data.id);

15.     console.log("Titolo:", data.title);

16.   })

17.   .catch(error => {

18.     console.error("Errore nella richiesta POST:", error);

19.   });

Risultato: nella console apparirà un nuovo oggetto post con un ID generato dal server. Questa operazione simula l’inserimento di dati in un database.

Uso di fetch con async/await

Scrivere le richieste con async/await rende il codice più chiaro. Gli esempi mostrano la stessa logica di GET e POST con una sintassi più leggibile.

Codice Esempio: GET con async/await

CODE: Javascript

1. async function getPost() {

2.   try {

3.     const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

4.     const data = await response.json();

5.     console.log("Titolo del post:", data.title);

6.     console.log("Contenuto:", data.body);

7.   } catch (error) {

8.     console.error("Errore nella richiesta GET:", error);

9.   }

10. }

12. getPost();

Codice Esempio: POST con async/await

CODE: Javascript

1. async function createPost() {

2.   try {

3.     const response = await fetch('https://jsonplaceholder.typicode.com/posts', {

4.       method: "POST",

5.       headers: {

6.         "Content-Type": "application/json"

7.       },

8.       body: JSON.stringify({

9.         title: "Titolo async/await",

10.         body: "Questo è il contenuto del post inviato con async/await",

11.         userId: 2

12.       })

13.     });

15.     const data = await response.json();

16.     console.log("Post creato con ID:", data.id);

17.     console.log("Titolo:", data.title);

18.   } catch (error) {

19.     console.error("Errore nella richiesta POST:", error);

20.   }

21. }

23. createPost();

GET vs POST in breve:
- GET: i dati viaggiano nell’URL → utile per ricerche veloci e dati pubblici, ma poco sicuro.
- POST: i dati viaggiano nel corpo della richiesta → preferibile per login, form e dati sensibili.

Tabella riassuntiva

Considerazioni

Il metodo fetch() è lo standard moderno per le richieste HTTP in JavaScript. - GET è ideale per leggere dati, ma poco sicuro per l’invio di informazioni (i parametri restano visibili nell’URL). - POST è preferibile per inviare dati, soprattutto quando riguardano sicurezza o privacy, poiché i parametri vengono trasmessi nel corpo della richiesta. - Con async/await il codice diventa più leggibile e semplice da gestire. Infine, è importante gestire sempre gli errori con try/catch o .catch() per evitare comportamenti imprevisti.