Skip to content

Fetch API

Ayúdame a seguir creando contenido 😍

Tienes varias jugosas alternativas:

  1. Suscríbete al canal de Youtube (es gratis) click aquí
  2. Si estás viendo un video no olvides regalar un 👍 like y comentario 🙏🏼
  3. También puedes ser miembro del canal de Youtube click aquí
  4. Puedes adquirir cursos premium en Udemy 👇🏼👇🏼👇🏼
  • fetch: La API Fetch proporciona una interfaz para recuperar recursos.
  • Fetch es una interfaz para hacer solicitudes AJAX en JavaScript. Es usado generalmente para hacer una solicitud a un API.
  • El método fetch() toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar.
  • fuente #02

Ajax

  • ajax
  • JavaScript Asíncrono + XML (XML viejito ahora utilizamos JSON)
  • AJAX no es una tecnología por sí misma, es un término que describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes.
  • Esto incluye: HTML, CSS, JavaScript, DOM, JSON y lo más importante, el objeto XMLHttpRequest (XMLHttpRequest viejito ahora Fetch)
  • Cuando estas tecnologías se combinan en un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse continuamente sin tener que volver a cargar la página completa.
  • Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del usuario.

Métodos nativos para AJAX

Fetch API

  • Fetch api Proporciona una interfaz JavaScript para hacer peticiones HTTP así como sus respuestas.
  • También provee un método para obtener recursos de forma asíncrona por la red.
  • fetch parámetros inicia el proceso de obtener un recurso de la red, devolviendo una promesa que se cumple una vez que la respuesta está disponible.
  • Este tipo de funcionalidad se conseguía previamente haciendo uso de XMLHttpRequest.
js
fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Conceptos Claves al momento de hacer una petición HTTP:

  • HTTP: Hypertext Transfer Protocol (HTTP) (o Protocolo de Transferencia de Hipertexto en español) es el nombre de un protocolo el cual nos permite realizar una petición de datos y recurso.
  • Ruta (PATH): Es la dirección de donde queremos obtener los recursos.
  • Métodos Http: HTTP define un conjunto de métodos de petición para indicar la acción que se desea realizar para un recurso determinado. (GET, POST, PUT, PATCH, DELETE)
  • Cabeceras (headers): Cabeceras HTTP opcionales, que pueden aportar información adicional a los servidores.
  • Códigos de respuestas (Response Codes): Un código de estado, indicando si la petición ha sido exitosa, o no, y debido a que. más info cat http
  • JSON: JavaScript Object Notation, es un formato basado en texto estándar para representar datos estructurados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web.

Estructura del JSON

  • Como se describió previamente, un JSON es una cadena cuyo formato recuerda al de los objetos literales JavaScript.
  • Es posible incluir los mismos tipos de datos básicos dentro de un JSON que en un objeto estándar de JavaScript - cadenas, números, arreglos, booleanos, y otros literales de objeto.
  • Esto permite construir una jerarquía de datos, como ésta: pokeapi/ditto
  • Json Formatter Chrome

Volviendo a Fetch

js
const url = "https://pokeapi.co/api/v2/pokemon/";

fetch(url)
    .then((res) => res.json())
    .then((data) => console.log(data));
  • Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola.
  • El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto Response.
  • Esto es, por supuesto, una respuesta HTTP sin el archivo JSON.
  • Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método json(), el cual está implementado por los objetos Request y Response.

En profundidad

js
fetch(resource [, init])
  • resource: Esto define el recurso que desea recuperar.
  • init (opcional): Un objeto que contiene cualquier configuración personalizada que desee aplicar a la solicitud. Las posibles opciones son:
    • method: El método de la petición, por ejemplo, GET, POST. Tenga en cuenta que el Originencabezado no se establece en las solicitudes Fetch con un método de HEADo GET.
    • headers: Cualquier encabezado que desee agregar a su solicitud, contenido dentro de un Headersobjeto o un objeto literal con String valores.
    • body: Cualquier cuerpo que desea agregar a su solicitud: esto puede ser una Blob, BufferSource, FormData, URLSearchParams, USVString, o ReadableStreamobjeto. Tenga en cuenta que una solicitud que utiliza el método GET no puede tener un cuerpo.
    • mode: El modo en el que desea utilizar para la solicitud, por ejemplo, cors, no-cors, o same-origin.
    • credentials: Controla lo que hacen los navegadores con las credenciales.

Ejemplo método POST

js
// Ejemplo implementando el metodo POST:
async function postData(url = '', data = {}) {
  // Opciones por defecto estan marcadas con un *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

Ejercicio pokeApi

html
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous"
        />

        <title>Poke API</title>
    </head>
    <body>
        <div class="container my-5">
            <section class="d-flex align-items-center" id="loading">
                <strong>Loading...</strong>
                <div
                    class="spinner-border ms-auto"
                    role="status"
                    aria-hidden="true"
                ></div>
            </section>
            <div class="row" id="card-dinamica">
                <template id="template-card">
                    <article class="col-md-6 col-lg-3 mb-3">
                        <div class="card text-center shadow">
                            <img
                                src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png"
                                alt=""
                                class="card-img-top"
                            />
                            <div class="card-body">
                                <h5 class="card-title text-primary lead">
                                    Rick Sanchez
                                </h5>
                                <p class="lead text-secondary">Human</p>
                            </div>
                        </div>
                    </article>
                </template>
            </div>
        </div>

        <script src="app.js"></script>
    </body>
</html>
js
document.addEventListener("DOMContentLoaded", () => {
    fetchData();
});

const cards = document.querySelector("#card-dinamica");
const templateCard = document.querySelector("#template-card").content;

const fetchData = async () => {
    try {
        loadingData(true);

        const res = await fetch("https://rickandmortyapi.com/api/character");
        const data = await res.json();

        pintarDatos(data);
    } catch (error) {
        console.log(error);
    } finally {
        loadingData(false);
    }
};

const loadingData = (estado) => {
    const loading = document.querySelector("#loading");
    if (estado) {
        loading.classList.remove("d-none");
    } else {
        loading.classList.add("d-none");
    }
};

const pintarDatos = (data) => {
    const fragment = document.createDocumentFragment();

    cards.textContent = "";

    data.results.forEach((item) => {
        const clone = templateCard.cloneNode(true);
        clone.querySelector("h5").textContent = item.name;
        clone.querySelector("p").textContent = item.species;
        clone.querySelector("img").setAttribute("src", item.image);

        fragment.appendChild(clone);
    });
    cards.appendChild(fragment);
};