Esercizi Fetch Javascript

Codegrind Team•Jul 22 2023

Ecco degli esercizi semplici con soluzione per praticare le basi del recupero dei dati in Javascript, utilizzando i fetch API.

Esercizio 1

Eseguire una richiesta GET e ottenere i dati da un'API.

fetch("https://dog.ceo/api/breeds/list/all")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));

Esercizio 2

Eseguire una richiesta POST per inviare dati a un'API:

const dati = {
  nome: "Mario",
  cognome: "Rossi",
};

fetch("https://api.example.com/dati", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(dati),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));

Esercizio 3

Eseguire una richiesta PUT per aggiornare dati su un'API:

const datiAggiornati = {
  nome: "Luca",
  cognome: "Verdi",
};

fetch("https://api.example.com/dati/1", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(datiAggiornati),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));

Esercizio 4

Eseguire una richiesta DELETE per eliminare dati da un'API:

fetch("https://api.example.com/dati/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));

Esercizio 5

Utilizzare l'opzione headers per includere un bearer token di autenticazione nella richiesta:

const token = "abc123";

fetch("https://api.example.com/dati", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));

Esercizio 6

Gestire i parametri di query nella richiesta GET:

const parametro1 = "valore1";
const parametro2 = "valore2";

fetch(
  `https://api.example.com/dati?parametro1=${parametro1}&parametro2=${parametro2}`
)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));

Esercizio 7

Gestire le risposte di errore con il codice di stato HTTP:

fetch("https://api.example.com/dati")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Errore nella richiesta");
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

Esercizio 8

Utilizzare async e await con fetch per semplificare la gestione delle risposte:

async function ottieniDati() {
  try {
    const response = await fetch("https://api.example.com/dati");
    if (!response.ok) {
      throw new Error("Errore nella richiesta");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

ottieniDati();

Esercizio 9

Utilizzare l'opzione mode per specificare il tipo di richiesta CORS:

fetch("https://api.example.com/dati", {
  mode: "cors",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log("Errore nella richiesta", error));