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!