Como no podía ser de otra forma, hoy te quiero hablar de otra novedad de ECMAScript 6, llamada fetch, la cual nos permite evitar el uso de XMLHttpRequest o librerías externas como JQuery y su función $.ajax. Para entender bien qué te aporta utilizar fetch frente a otros métodos, vamos a ver primero el siguiente ejemplo con XMLHttpRequest:
const ChuckNorrisFact = () => {
return new Promise((resolves, rejects) => {
const api = 'https://api.chucknorris.io/jokes/random';
const request = new XMLHttpRequest();
request.open('GET', api);
request.onload = () => {
if (request.status === 200) {
resolves(JSON.parse(request.response));
} else {
rejects(new Error(request.response));
}
};
request.onerror = err => rejects(err);
request.send();
});
};
ChuckNorrisFact().then(fact => console.log(fact), err => console.error(err));
Hasta ahora, cuando trabajábamos con XMLHttpRequest debíamos gestionar diferentes cosas: el método a utilizar (GET), el evento onload de la llamada, el valor de status para saber si ha ido bien o mal, el evento error, además de llamar a la función send para que todo se materialice. Sin embargo, utilizando el método fetch todo el código anterior se reduce a lo siguiente:
fetch('https://api.chucknorris.io/jokes/random')
.then(res => res.json())
.then(console.log);
Como ves, con fetch reduces muchísimo el código y la simplicidad del mismo. Por supuesto, en ambos casos podemos hacer uso de promesas para facilitar el manejo de los callbacks.
¡Saludos!