Guía completa de la API Fetch de JavaScript: conceptos básicos, ejemplos, manejo de errores y seguridad

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción: ¿Qué es la API Fetch?

JavaScript desempeña un papel crucial en el desarrollo front‑end de aplicaciones web. Entre sus muchas características, la API Fetch es una herramienta poderosa para realizar comunicaciones asíncronas con servidores. En este artículo explicamos cómo usar la API Fetch de forma amigable para principiantes y presentamos sus funcionalidades mediante ejemplos prácticos.

¿Cuál es la función de la API Fetch?

La API Fetch es una interfaz moderna y estándar para manejar peticiones y respuestas HTTP. En el pasado, se utilizaba XMLHttpRequest, pero la API Fetch ofrece un diseño más simple e intuitivo.

Diferencias entre la API Fetch y XMLHttpRequest

Las principales diferencias entre la API Fetch y el tradicional XMLHttpRequest son las siguientes.

Como se muestra arriba, la API Fetch se utiliza ampliamente como una herramienta más flexible y amigable para los desarrolladores en el desarrollo web moderno.

Casos de uso comunes de la API Fetch

La API Fetch se emplea habitualmente en los siguientes escenarios.

1. Obtención de datos: Recuperar información de usuarios o datos de publicaciones desde APIs.
2. Envío de datos: Transmitir datos de formularios o datos JSON a un servidor.
3. Actualizaciones en tiempo real: Recibir datos dinámicos de un servidor y actualizar el contenido de la página.
4. Integración con APIs externas: Conectar con APIs de terceros para ampliar la funcionalidad.

Por estas razones, la API Fetch se ha convertido en una parte esencial del desarrollo JavaScript moderno.

Resumen

En esta sección explicamos el rol básico y las ventajas de la API Fetch. En comparación con el tradicional XMLHttpRequest, la API Fetch es más intuitiva, más fácil de usar y basada en Promesas, lo que simplifica el manejo de errores. En la siguiente sección exploraremos el uso básico de la API Fetch con ejemplos de código concretos.

Al continuar, aprenderás a recuperar y manipular datos usando la API Fetch en la práctica.

2. Uso básico de la API Fetch (con código de ejemplo)

En esta sección explicamos el uso básico de la API Fetch mediante ejemplos de código concretos. Incluso los principiantes pueden seguirlo, comenzando con una solicitud GET sencilla.

Sintaxis básica de la API Fetch

La sintaxis básica de la API Fetch se muestra a continuación.

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

• url: Especifica la URL de la petición.
• options: Se utiliza para configurar métodos HTTP y encabezados (opcional).
• then: Maneja la respuesta.
• catch: Maneja los errores.

Ejemplo de una solicitud GET

A continuación, un ejemplo básico de una solicitud GET.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // Display data
  })
  .catch(error => {
    console.error('Error:', error);
  });

Uso de async/await

Con JavaScript moderno, puedes escribir código más limpio usando async/await.

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('A network error occurred');
    }
    const data = await response.json();
    console.log(data); // Display data
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchPost();

Añadiendo parámetros a la URL

Para incluir parámetros de consulta, escribe la petición de la siguiente manera.

const userId = 1;
fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Resumen

En esta sección cubrimos los conceptos básicos para realizar solicitudes GET utilizando la API Fetch.

• Sintaxis básica: Diseño simple y fácil de entender.
• Manejo de errores: Soporta tanto errores de red como HTTP.
• async/await: Mejora la legibilidad y el mantenimiento.
• Parámetros de URL: Permite implementar condiciones dinámicas fácilmente.

La siguiente sección explica con más detalle cómo procesar los datos de respuesta devueltos por la API Fetch.

3. Manejo de respuestas y conversión de formatos de datos

En esta sección explicamos cómo manejar las respuestas obtenidas mediante la API Fetch. Nos enfocamos especialmente en la conversión de datos JSON y en el trabajo con datos de texto y binarios.

¿Qué es el objeto de respuesta de la API Fetch?

Con la API Fetch, la respuesta devuelta después de una solicitud se proporciona como un objeto Response.

Propiedades principales

Obtención y conversión de datos JSON

Con la API Fetch, los servidores a menudo devuelven datos en formato JSON.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Response error: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Obtención de datos de texto

En algunos casos, puede que necesites obtener datos en texto plano en lugar de JSON.

fetch('https://example.com/textfile.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Obtención de datos binarios

Para obtener imágenes o archivos como datos binarios, usa blob() o arrayBuffer().

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('image').src = url;
  })
  .catch(error => console.error('Error:', error));

Resumen

En esta sección aprendiste cómo manejar respuestas de la API Fetch y convertir formatos de datos.

• Datos JSON: Soporta el formato de respuesta de servidor más común.
• Datos de texto y binarios: Obtén diferentes formatos según sea necesario.
• Encabezados de respuesta: Útiles para la gestión de datos y verificaciones de seguridad.

4. Envío de solicitudes POST (con ejemplos prácticos)

En esta sección explicamos cómo enviar datos a un servidor mediante solicitudes POST con la API Fetch. Cubrimos cómo enviar datos de formulario y datos JSON usando ejemplos prácticos.

Sintaxis básica para una solicitud POST

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

• method: Especifica el método HTTP a usar (en este caso, POST).
• headers: Especifica el formato de los datos (p. ej., JSON o datos de formulario).
• body: Convierte los datos a una cadena y los envía.

Ejemplo: Envío de datos JSON

const userData = {
  name: 'Taro Tanaka',
  email: 'taro.tanaka@example.com'
};

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

Ejemplo: Envío de datos de formulario

const formData = new FormData();
formData.append('name', 'Taro Tanaka');
formData.append('email', 'taro.tanaka@example.com');

fetch('https://example.com/api/submit', {
  method: 'POST',
  body: formData
})
  .then(response => response.text())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

Ejemplo: Solicitud con autenticación

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

Resumen

En esta sección, cubrimos los conceptos básicos y el uso práctico de solicitudes POST con la API Fetch.

• Envío de datos JSON: Ideal para la integración de API.
• Envío de datos de formulario: Funciona bien para formularios simples y cargas de archivos.
• Solicitudes autenticadas: Soporta los requisitos de seguridad de las API.

La siguiente sección profundiza en el manejo de errores y técnicas de depuración de la API Fetch.

5. Manejo de Errores y Técnicas de Depuración

En esta sección, analizamos detalladamente el manejo de errores y las técnicas de depuración al usar la API Fetch.

Errores Comunes que Ocurren con la API Fetch

Manejo Básico de Errores

fetch('https://jsonplaceholder.typicode.com/posts/9999')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error('Error:', error.message));

Manejo de Timeouts

const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => controller.abort(), 5000);

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Timeout: The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  })
  .finally(() => clearTimeout(timeout));

Técnicas de Depuración

1. Salida de registro:

   fetch('https://example.com/api/data')
     .then(response => {
       console.log('Status code:', response.status);
       return response.json();
     })
     .then(data => console.log('Data:', data))
     .catch(error => console.error('Error:', error.message));
   

2. Herramientas de desarrollo del navegador (pestaña Network):

• Inspecciona solicitudes y respuestas en tiempo real.

Resumen

En esta sección, exploramos el manejo de errores y las técnicas de depuración para la API Fetch.

• Errores comunes: Errores de red, errores de análisis JSON y problemas de timeout.
• Manejo detallado de errores: Ejemplos prácticos con lógica clara de manejo de errores.
• Depuración: Identifica problemas usando registros y las herramientas de desarrollo del navegador.

La siguiente sección explica patrones de uso avanzados y medidas de seguridad para la API Fetch.

6. Uso Avanzado y Medidas de Seguridad

En esta sección, explicamos técnicas de uso avanzado y consideraciones de seguridad para la API Fetch.

Cancelación de Solicitudes (AbortController)

const controller = new AbortController();
const signal = controller.signal;

fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('The request was aborted');
    } else {
      console.error('Error:', error.message);
    }
  });

setTimeout(() => controller.abort(), 3000); // Abort after 3 seconds

Solicitudes con Credenciales de Autenticación

const token = 'YOUR_ACCESS_TOKEN';

fetch('https://example.com/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

Soporte CORS (Cross-Origin Resource Sharing)

fetch('https://example.com/api/data', {
  method: 'GET',
  mode: 'cors'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Resumen

En esta sección, cubrimos el uso avanzado de la API Fetch y las medidas de seguridad.

• Cancelación de solicitudes: Mejora la eficiencia usando AbortController.
• Solicitudes autenticadas: Implementa tokens de API y contramedidas CSRF.
• Manejo de CORS: Resuelve problemas de origen cruzado mediante una configuración adecuada.

7. Errores Comunes y Solución de Problemas (Con Tabla Resumen)

En esta sección explicamos los errores comunes que puedes encontrar al usar la Fetch API y cómo resolverlos.

Errores comunes y sus causas

Manejo detallado de errores

fetch('https://invalid-url.example.com')
  .then(response => response.json())
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.error('Network error');
    } else {
      console.error('Other error:', error.message);
    }
  });

Resumen

En esta sección revisamos los errores comunes de la Fetch API y cómo manejarlos.

• Errores típicos: errores de red, errores de formato JSON y problemas de tiempo de espera.
• Manejo detallado: ejemplos prácticos que demuestran un manejo robusto de errores.

8. Ejemplo práctico: Construir una aplicación web sencilla usando datos de una API

En esta sección explicamos cómo crear una aplicación web simple que recupera datos de una API externa usando la Fetch API.

Preparando el HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Fetch API Sample App</title>
</head>
<body>
  <h1>Post List</h1>
  <button id="fetchButton">Fetch Data</button>
  <ul id="postList"></ul>
  <p id="errorMessage" style="color: red;"></p>

  <script src="app.js"></script>
</body>
</html>

Creando el código JavaScript

const fetchButton = document.getElementById('fetchButton');
const postList = document.getElementById('postList');
const errorMessage = document.getElementById('errorMessage');

async function fetchPosts() {
  fetchButton.disabled = true;
  errorMessage.textContent = '';
  postList.innerHTML = '';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    const posts = await response.json();
    posts.forEach(post => {
      const listItem = document.createElement('li');
      listItem.textContent = `${post.id}: ${post.title}`;
      postList.appendChild(listItem);
    });
  } catch (error) {
    errorMessage.textContent = 'Failed to retrieve data.';
  } finally {
    fetchButton.disabled = false;
  }
}

fetchButton.addEventListener('click', fetchPosts);

Resumen

En esta sección demostramos cómo construir una aplicación web práctica usando la Fetch API.

• Características principales: recuperación de datos y renderizado de listas.
• Manejo de errores: mostrar mensajes amigables al usuario en caso de fallos.

9. Conclusión y próximos pasos

En este artículo cubrimos la Fetch API de manera exhaustiva, desde los conceptos básicos hasta usos avanzados y ejemplos prácticos. En esta sección final revisamos los puntos clave de cada apartado y sugerimos qué aprender a continuación.

Principales conclusiones

Estructura básica y características de la Fetch API

• La Fetch API es una interfaz poderosa para realizar comunicaciones asíncronas con servidores en JavaScript.
• En comparación con el tradicional XMLHttpRequest, es más simple, flexible y basada en Promesas, lo que mejora considerablemente la legibilidad.

Recuperación de datos y manejo de respuestas

• Explicamos cómo obtener datos JSON, texto y binarios.
• Usando async/await, puedes escribir código más intuitivo con un manejo de errores más sencillo.

Envío de datos y solicitudes POST

• Aprendiste a enviar datos JSON y datos de formularios a un servidor.
• También se cubrieron solicitudes seguras mediante tokens de autenticación.

Técnicas de manejo de errores y depuración

• Presentamos soluciones prácticas para errores de red y errores de análisis de JSON.
• Se implementaron técnicas avanzadas como tiempos de espera de solicitud y abortar peticiones.

Construcción de aplicaciones web prácticas

• Creaste una aplicación web que recupera datos de una API externa y los muestra dinámicamente en la interfaz.
• Mediante el manejo de errores y el control del estado de los botones, aprendiste patrones de diseño que reflejan escenarios reales de desarrollo.

Próximos pasos

Para aprovechar aún mejor la API Fetch, considera aprender los siguientes temas.

Técnicas avanzadas de implementación de API

• Paginación y ordenación: Optimiza el procesamiento al trabajar con grandes conjuntos de datos.
• Funcionalidad de búsqueda: Implementa filtrado de datos basado en la entrada del usuario.
• Carga de archivos: Gestiona la subida de imágenes y videos.

Mejoras de seguridad

• OAuth 2.0 y autenticación: Comprende los procesos de autenticación y autorización para conexiones API seguras.
• Protección contra CSRF y XSS: Implementa envíos de formularios más seguros y defiéndete contra scripts maliciosos.

Integración con tecnologías modernas

• Biblioteca Axios: Una alternativa popular a la API Fetch que simplifica la gestión de solicitudes HTTP.
• GraphQL: Un modelo de diseño de API moderno que optimiza la recuperación de datos en comparación con las APIs REST.
• Comunicación en tiempo real: Implementa intercambio de datos en tiempo real usando WebSocket o Server‑Sent Events.

Recursos de aprendizaje

Utiliza la siguiente documentación oficial y recursos de aprendizaje para mejorar aún más tus habilidades.

• MDN Web Docs (Oficial): Documentación detallada de la API Fetch
• JSONPlaceholder (API de prueba): Una API dummy gratuita para pruebas
• Sitio de aprendizaje de JavaScript: JavaScript.info

Notas finales

A través de este artículo, has adquirido conocimientos y habilidades prácticas que cubren desde lo básico hasta el uso real de la API Fetch.

La API Fetch se usa ampliamente para tareas que van desde la recuperación simple de datos hasta integraciones complejas de API. Al aplicar lo que has aprendido aquí a proyectos reales, puedes obtener aún más experiencia práctica.

Próximas acciones:

• Construye pequeños proyectos usando APIs reales para obtener experiencia práctica.
• Refuerza el manejo de errores y las medidas de seguridad para mejorar la preparación para producción.
• Adopta nuevas tecnologías como GraphQL y la comunicación en tiempo real para ampliar aún más tu conjunto de habilidades.