JavaScript - de Cero a Profesional

Consumo de APIs

Uso de la Fetch API para consumir datos de APIs externas.

En el mundo del desarrollo web, consumir datos de APIs externas es una tarea común y crucial. La Fetch API proporciona una manera poderosa y flexible de realizar solicitudes de red a recursos externos, como APIs. Este capítulo explora cómo utilizar la Fetch API en JavaScript para recuperar y manejar datos de manera eficiente.

Introducción a la Fetch API

La Fetch API es una moderna interfaz de JavaScript que permite realizar solicitudes HTTP a servidores web. Esta API proporciona una forma más potente y flexible de realizar solicitudes de red en comparación con técnicas anteriores como XMLHttpRequest.

Realizar una Solicitud Fetch Básica

Solicitud GET Simple:

– Para realizar una solicitud GET usando Fetch, simplemente pasas la URL del recurso que deseas obtener. Fetch devuelve una promesa que resuelve con el objeto Response de la solicitud.

				
					fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();  // Parsea la respuesta como JSON
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data: ', error));

– Este código solicita datos desde https://api.example.com/data, espera la respuesta, la convierte a JSON y luego imprime estos datos o captura errores si los hubiera.

Manejo de Respuestas

La respuesta de una solicitud Fetch puede ser manejada de varias formas, dependiendo del tipo de datos que se espera del servidor.

1. Procesando JSON:

– Si la respuesta es JSON, puedes usar el método .json() del objeto Response, que también devuelve una promesa.

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

2. Procesando Otros Formatos:

    • Para otros tipos de datos, como texto plano, puedes usar el método .text().
    • Para datos binarios, como imágenes, puedes usar .blob().

Opciones Avanzadas con Fetch

Fetch no se limita a solicitudes GET simples; también puedes realizar POST, PUT, DELETE, entre otros, especificando un segundo argumento con opciones adicionales.

1. Solicitud POST:

    • Para enviar datos a un servidor, puedes configurar la solicitud Fetch con un método HTTP POST y proporcionar un cuerpo de solicitud.

				
					fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice', job: 'Developer' })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

– Este ejemplo envía un objeto JSON al servidor, indicando con los encabezados que el tipo de contenido es JSON.

Seguridad y CORS

La Fetch API está sujeta a la política de mismo origen (Same-Origin Policy), lo que significa que las solicitudes a dominios diferentes al de la página que hace la solicitud están bloqueadas por defecto por razones de seguridad.

Cross-Origin Resource Sharing (CORS):

– Para realizar solicitudes a diferentes dominios, el servidor externo debe implementar CORS y permitir específicamente tu dominio o usar técnicas como JSONP donde sea apropiado.

Recursos