Sanfeliu
  1. Apunts
  2. JavaScript
  3. Lliçó 13 de 14

Introducció a FetchAPI i el protocol HTTP

Com fer peticions HTTP des del navegador amb fetch: els mètodes i codis de resposta d’HTTP, exemples amb capçaleres i què és una Promise.

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ètode Funció principal Idempotent
GET Obtenir dades ✅ Sí
POST Enviar dades ❌ No
PUT Actualitzar dades ✅ Sí
DELETE Esborrar 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

Codi Missatge Descripció breu
200 OK Tot correcte, resposta amb dades
201 Creat Nou recurs creat correctament
401 No autoritzat Falta autenticació
404 No trobat Recurs 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