Skip to main content

Introducció a FetchAPI i el protocol HTTP

Què és FetchAPI?​

FetchAPI és una interfície moderna de JavaScript que ens permet fer peticions HTTP de manera senzilla i eficient. És nativa als navegadors moderns i substitueix l'antiga XMLHttpRequest, aportant:

  • Sintaxi més clara i llegible
  • Ús de Promises per gestionar operacions asíncrones
  • Suport natiu per a JSON
  • Millor maneig dels errors

Antecedents: XMLHttpRequest vs FetchAPI​

Abans de Fetch, les peticions HTTP es feien amb XMLHttpRequest, una API antiga i més complexa. Fetch va sorgir com una alternativa moderna i més intuïtiva. Així:

// Amb Fetch
fetch("https://example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

El protocol HTTP​

HTTP (HyperText Transfer Protocol) és la base de la comunicació web. Es basa en un model client-servidor:

  • Els clients (com Chrome o Firefox) fan peticions
  • Els servidors (com Apache o Nginx) responen

Mètodes HTTP principals​

MètodeFunció principalIdempotent
GETObtenir dades✅ Sí
POSTEnviar dades❌ No
PUTActualitzar dades✅ Sí
DELETEEsborrar recursos✅ Sí

Codi d'exemple amb Fetch​

// Exemple simple
const url = "https://api.spotify.com/v1/artists/0TnOYISbd1XYRBk9myaseg";
fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data));
// Exemple avançat amb headers i mètode
await fetch("https://api.spotify.com/v1/me/albums", {
  method: "PUT",
  body: JSON.stringify({ ids: ["string"] }),
  headers: {
    Authorization: "Bearer e5fajvra…",
    "Content-Type": "application/json",
  },
});

Codi de resposta HTTP​

CodiMissatgeDescripció breu
200OKTot correcte, resposta amb dades
201CreatNou recurs creat correctament
401No autoritzatFalta autenticació
404No trobatRecurs no existeix

Més informació a MDN Web Docs

Promises en JavaScript​

Una Promise és un objecte que representa una operació asíncrona pendent de resoldre’s. Pot tenir tres estats:

  • pending (pendent)
  • fulfilled (resolta amb èxit)
  • rejected (ha fallat)

Permeten gestionar operacions com crides a API sense bloquejar el flux del programa.

const promesa = new Promise((resolve, reject) => {
  // simulació
  let correcte = true;
  if (correcte) resolve("Tot OK");
  else reject("Error");
});

Activitat pràctica​

Relaciona cada acció amb el mètode HTTP més adient:

  • Publicar un Tweet a Twitter → POST
  • Obtenir la llista d'amics a LinkedIn → GET
  • Actualitzar el perfil a Instagram → PUT
  • Eliminar un correu a Gmail → DELETE

Conclusió​

La FetchAPI ens ofereix una eina poderosa per connectar aplicacions frontend amb serveis externs. Si ho combinem amb un bon enteniment de HTTP i les Promises, podrem crear aplicacions web modernes, eficients i robustes.

Recursos recomanats​