Guías Técnicas

Fetch API y Consumo de APIs en JavaScript

¿Qué es la Fetch API?

La Fetch API es una interfaz moderna de JavaScript que permite realizar solicitudes HTTP de manera más sencilla y flexible que el antiguo objeto XMLHttpRequest. Es una herramienta fundamental para consumir APIs y manejar recursos de manera asíncrona.

Realizando una Solicitud GET

Para realizar una solicitud GET con la Fetch API, utilizamos la función fetch, que toma como argumento la URL del recurso que queremos obtener.

Ejemplo de Solicitud GET

javascript 
// URL de la API
const url = 'https://api.example.com/data';

// Realizando la solicitud GET
fetch(url)
  .then(response => {
      if (!response.ok) {
          throw new Error('Error en la red');
      }
      return response.json(); // Convertir la respuesta a JSON
  })
  .then(data => {
      console.log('Datos recibidos:', data);
  })
  .catch(error => {
      console.error('Error:', error);
  });

Realizando una Solicitud POST

Además de GET, la Fetch API permite realizar solicitudes POST para enviar datos a un servidor. Esto se puede hacer pasando un objeto de configuración como segundo argumento a la función fetch.

javascript 
// URL de la API
const url = 'https://api.example.com/data';

// Datos que se enviarán
const datos = {
  nombre: 'Juan',
  edad: 30
};

// Realizando la solicitud POST
fetch(url, {
  method: 'POST', // Método HTTP
  headers: {
      'Content-Type': 'application/json' // Tipo de contenido
  },
  body: JSON.stringify(datos) // Convertir datos a JSON
})
  .then(response => {
      if (!response.ok) {
          throw new Error('Error en la red');
      }
      return response.json(); // Convertir la respuesta a JSON
  })
  .then(data => {
      console.log('Respuesta del servidor:', data);
  })
  .catch(error => {
      console.error('Error:', error);
  });
  Manejo de Errores

Es importante manejar errores correctamente al realizar solicitudes con la Fetch API. Esto se puede hacer revisando el estado de la respuesta y usando catch para atrapar excepciones. Resumen

  • La Fetch API proporciona una forma más sencilla y moderna de realizar solicitudes HTTP en JavaScript.
  • Se puede usar para hacer solicitudes GET y POST, entre otras.
  • Maneja las respuestas como promesas, lo que permite un flujo de código más limpio y legible.
  • Es fundamental manejar correctamente los errores para una buena experiencia del usuario.