Hacer peticiones con fetch de ECMAScript 6

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!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.