Introduzione a Fetch

Fetch è una funzione integrata in JavaScript utilizzata per effettuare richieste HTTP asincrone. È una promessa (Promise) che risolve la sostituzione del vecchio XMLHttpRequest e fornisce un modo più semplice e leggibile per lavorare con richieste e risposte HTTP.

Come Funziona Fetch

La sintassi di base di fetch è:

fetch(url, options)
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Errore:', error));
          

Il metodo fetch prende due argomenti: l'URL della risorsa da recuperare e un oggetto opzionale options che può includere il metodo della richiesta (GET, POST, ecc.), intestazioni e il corpo della richiesta.

Esempio di Richiesta GET

Un semplice esempio di richiesta GET per recuperare dati da un endpoint:

            fetch('https://api.example.com/data')
              .then(response => {
                if (!response.ok) {
                  throw new Error('Network response was not ok');
                }
                return response.json();
              })
              .then(data => {
                console.log(data);
              })
              .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
              });
          

Esempio di Richiesta POST

Un esempio di richiesta POST per inviare dati a un endpoint:

            fetch('https://api.example.com/data', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                name: 'John',
                age: 30
              })
            })
              .then(response => {
                if (!response.ok) {
                  throw new Error('Network response was not ok');
                }
                return response.json();
              })
              .then(data => {
                console.log('Success:', data);
              })
              .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
              });
          

Introduzione agli Endpoint

Un endpoint è un URL specifico che rappresenta una risorsa sul server. Gli endpoint sono usati per definire dove e come le richieste HTTP devono essere indirizzate.

• Endpoint GET: Utilizzato per recuperare dati. Ad esempio, GET /api/users recupera una lista di utenti.
• Endpoint POST: Utilizzato per inviare dati. Ad esempio, POST /api/users crea un nuovo utente.
• Endpoint PUT: Utilizzato per aggiornare dati. Ad esempio, PUT /api/users/1 aggiorna l'utente con ID 1.
• Endpoint DELETE: Utilizzato per eliminare dati. Ad esempio, DELETE /api/users/1 elimina l'utente con ID 1.

Utilizzo Combinato di Fetch e Endpoint

Combiniamo fetch ed endpoint per interagire con le risorse del server in modo efficace. Ecco un esempio di una funzione che utilizza fetch per inviare una richiesta POST a un endpoint:

            const createUser = (user) => {
              fetch('https://api.example.com/users', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
              })
                .then(response => {
                  if (!response.ok) {
                    throw new Error('Network response was not ok');
                  }
                  return response.json();
                })
                .then(data => {
                  console.log('User created:', data);
                })
                .catch(error => {
                  console.error('There has been a problem with your fetch operation:', error);
                });
            };
  
            // Esempio di utilizzo
            const newUser = { name: 'Alice', age: 25 };
            createUser(newUser);
          

Conclusioni

Fetch e gli endpoint sono strumenti essenziali per lavorare con le API in JavaScript. Fetch rende semplice effettuare richieste HTTP asincrone, mentre gli endpoint forniscono punti di accesso chiari e definiti alle risorse del server.