El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem com fer sol·licituds HTTP en JavaScript utilitzant la Fetch API i AJAX. Aquestes eines són fonamentals per interactuar amb servidors web i obtenir dades de manera asíncrona.

Objectius d'Aprenentatge

Entendre què és la Fetch API i com utilitzar-la.
Aprendre a fer sol·licituds GET i POST amb Fetch.
Comparar Fetch amb AJAX (XMLHttpRequest).
Gestionar errors en sol·licituds HTTP.
Manipular respostes JSON.

Què és la Fetch API?

La Fetch API és una interfície moderna que proporciona una manera fàcil i lògica de fer sol·licituds de xarxa asíncrones. És una alternativa més moderna i potent a l'antic objecte XMLHttpRequest.

Característiques de la Fetch API

Promeses: Utilitza promeses per gestionar les sol·licituds, fent el codi més net i fàcil de llegir.
Suport per a JSON: Facilita la manipulació de dades JSON.
Més Flexible: Permet configurar sol·licituds amb més opcions.

Sol·licitud GET amb Fetch

Una sol·licitud GET és utilitzada per obtenir dades d'un servidor. Aquí tens un exemple bàsic:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Error en la sol·licitud de xarxa');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Hi ha hagut un problema amb la teva sol·licitud:', error);
  });

Explicació del Codi

fetch('https://api.example.com/data'): Fa una sol·licitud GET a l'URL especificat.
response.ok: Comprova si la resposta és correcta.
response.json(): Converteix la resposta a format JSON.
.then(data => { ... }): Manipula les dades obtingudes.
.catch(error => { ... }): Gestiona els errors.

Sol·licitud POST amb Fetch

Una sol·licitud POST és utilitzada per enviar dades a un servidor. Aquí tens un exemple:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Error en la sol·licitud de xarxa');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Hi ha hagut un problema amb la teva sol·licitud:', error);
  });

Explicació del Codi

method: 'POST': Especifica que la sol·licitud és de tipus POST.
headers: Defineix els encapçalaments de la sol·licitud, en aquest cas, indicant que les dades són en format JSON.
body: Conté les dades que s'envien, convertides a una cadena JSON.

Comparació: Fetch vs. XMLHttpRequest

Característica	Fetch API	XMLHttpRequest
Sintaxi	Més neta i basada en promeses	Basada en callbacks
Suport per a JSON	Natiu, amb `response.json()`	Requereix parsejar manualment
Maneig d'Errors	Més senzill amb `.catch()`	Més complex amb `onerror`
Flexibilitat	Més opcions i configuracions	Menys flexible

Gestió d'Errors

És important gestionar els errors en les sol·licituds HTTP per assegurar-se que l'aplicació pugui reaccionar adequadament. Aquí tens un exemple de com fer-ho amb Fetch:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Error: ${response.status} ${response.statusText}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Hi ha hagut un problema amb la teva sol·licitud:', error);
  });

Exercicis Pràctics

Exercici 1: Sol·licitud GET

Fes una sol·licitud GET a l'API pública de GitHub per obtenir informació sobre un usuari.

fetch('https://api.github.com/users/octocat')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Exercici 2: Sol·licitud POST

Envia dades a una API fictícia utilitzant una sol·licitud POST.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Resum

En aquesta secció, hem après a utilitzar la Fetch API per fer sol·licituds GET i POST, gestionar errors i comparar Fetch amb XMLHttpRequest. La Fetch API és una eina poderosa i flexible per treballar amb sol·licituds HTTP en JavaScript, i és essencial per desenvolupar aplicacions web modernes.

En el proper tema, explorarem com utilitzar WebSockets per a la comunicació en temps real.

Fetch API i AJAX

Objectius d'Aprenentatge

Què és la Fetch API?

Característiques de la Fetch API

Sol·licitud GET amb Fetch

Explicació del Codi

Sol·licitud POST amb Fetch

Explicació del Codi

Comparació: Fetch vs. XMLHttpRequest

Gestió d'Errors

Exercicis Pràctics

Exercici 1: Sol·licitud GET

Exercici 2: Sol·licitud POST

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final