Recuperación de datos con fetch

¿Qué es fetch?

fetch es una API nativa de JavaScript que permite realizar solicitudes HTTP de manera sencilla. Se utiliza para interactuar con recursos externos como APIs o servidores. A través de la API podemos recuperar y/o enviar datos a un servidor.

Solicitudes de datos con fetch

Las solicitudes de datos con fetch tienen 3 partes:

  • La solicitud propiamente dicha, donde se especifica obligatoriamente una URL y, opcionalmente, un objeto de configuración con opciones para la solicitud.
  • Procesamiento de la respuesta -en forma de promesa- a través del método .then().
  • Manejo de posibles errores a través del método .catch(), capturando el error y actuando en consecuencia.

A continuación se muestra un ejemplo:

fetch(url, options)
    .then(response => {
        // Manejar la respuesta
    })
    .catch(error => {
        // Manejar errores
    });

Métodos principales asociados

El manejo de solicitudes se realiza a través de los siguientes métodos:

  • GET: Recuperar datos (por defecto en fetch).
  • POST: Enviar datos.
  • PUT/PATCH: Actualizar datos.
  • DELETE: Eliminar datos.
fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
        if (!response.ok) {
            throw new Error('Error en la solicitud');
        }
        return response.json(); // Convertir la respuesta en JSON
    })
    .then(data => {
        console.log(data); // Usar los datos
    })
    .catch(error => {
        console.error('Hubo un problema con la solicitud:', error);
    });

Ejemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch - API Pública</title>
    <script src="codigofetch.js" defer></script>
</head>
<body>
    <h1>Publicaciones</h1>
    <ul id="posts"></ul>
</body>
</html>

        const postsContainer = document.getElementById('posts');

        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => {
                if (!response.ok) {
                    throw new Error('No se pudo recuperar los datos');
                }
                return response.json();
            })
            .then(posts => {
                posts.forEach(post => {
                    const li = document.createElement('li');
                    li.textContent = `${post.title}`;
                    postsContainer.appendChild(li);
                });
            })
            .catch(error => {
                console.error('Error:', error);
            });