El API de Fetch, la documentación de MDN lo menciona como un mecanismo más óptimo para hacer peticiones XMLHttpRequest, lo que significa que tras bambalinas, Fetch trabaja con XMLHttpRequest. A día de hoy, Fetch es compatible con todos los navegadores, salvo Internet Explorer.
Fetch es mucho más rápido que XMLHttpRequest a la hora de consumir APIs.
Funcionamiento de Fetch
Para ello utilizamos el método fetch() haciendo referencia al recurso. Adicionalmente podemos pasar un objeto con opciones, que las veremos cuando hagamos un CRUD con Fetch.
Nota: el método por defecto para Fetch es GET
Fetch es un mecanismo que trabaja con promesas, con lo que la resultante de fetch nos devolverá un método then() para la siguiente iteración de código, y para capturar nuestro código de error utilizaremos el método catch(), y si necesitamos ejecutar un código sí o sí, utilizaremos el método finally().
Archivos
Vamos a tener dos archivos, fetch.html y fetch.js, que tienen la siguiente sintaxis.
La sintaxis de fetch.html es.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Fetch Ajax</title> </head> <body> <h1>Ajax</h1> <h2>Fetch Ajax</h2> <ol id="fetch"></ol> <script src="./02fetch.js"></script> </body> </html>
La sintaxis de fetch.js es
(() => {
const $fetch = document.getElementById("fetch"),
$fragment = document.createDocumentFragment();
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => {
return res.ok ? res.json() : Promise.reject(res);
})
.then((json) => {
json.forEach((el) => {
const $li = document.createElement("li");
$li.innerHTML = `${el.name} --- ${el.email} --- ${el.phone}`;
$fragment.appendChild($li);
});
$fetch.appendChild($fragment);
})
.catch((err) => {
let message = err.statusText || "Ocurrió un error";
$fetch.innerHTML = `Error: ${err.status}: ${message}`;
})
.finally(() => {
console.log(
"Esto se ejecutará independientemente del resultado de la promesa Fetch"
);
});
})();