Cómo usar la API Fetch para OBTENER y PUBLICAR datos en JavaScript

JavaScript Fetch API proporciona una interfaz simple para obtener recursos. Es el estándar más nuevo para manejar solicitudes de red en el navegador.

La mayor ventaja de Fetch sobre XMLHttpRequest(XHR) es que el primero utiliza promesas que facilitan mucho el trabajo con solicitudes y respuestas. No necesita preocuparse por las devoluciones de llamadas y el código repetitivo que viene con XHR.

Desde ES7, Fetch ahora está completamente implementado en Chrome. Incluso puede usar async-await y deshacerse por completo de las promesas.

¿Cómo utilizar la API de búsqueda?

El fetch() el método está disponible en el window global scope, siendo el primer parámetro la URL a la que desea llamar. De forma predeterminada, Fetch API realiza una solicitud GET. Una solicitud HTTP muy simple con fetch() buscaría a continuación:

// `url` - the URL you want to call
fetch(url)
    .then(res => {
        // code to handle the response data
    }).catch(err => {
        // code to handle request errors
    });

¿Parece limpio y simple? Usemos la API Fetch para obtener y publicar datos.

Uso de Fetch para OBTENER datos

Para demostrar cómo funciona la solicitud Fetch GET, llamaremos a la API de GitHub para recuperar una lista de usuarios. Luego usaremos JavaScript estándar para mostrar a los usuarios en la página web.

Comencemos con el HTML. Solo necesitamos un encabezado y una lista desordenada:

<h1>GitHub Users</h1>
<ul id="users"></ul>

Antes de llamar a fetch() método, primero obtengamos el elemento de la lista de DOM donde vamos a poner la información de los usuarios:

// List Element
const ul = document.querySelector('#users'); 

// GitHub API URL
const url = 'https://api.github.com/users';

Ahora hagamos el trabajo real:llamar a la API Fetch para obtener una lista de usuarios:

fetch(url)
    .then(res => {
        // code to handle the response
    }).catch(err => {
        // code to handle errors
    });

El fetch() método devuelve una promesa que llama al then() método con objeto de respuesta cuando se cumple. El objeto de respuesta tiene varios métodos para manejar la respuesta de la manera que queremos hacerlo. Estos son algunos de estos métodos:

• json() — Resuelve la promesa con un objeto JSON
• text() — Resuelve la promesa con texto sin formato
• blob() — Resuelve la promesa con un objeto Blob
• formData() — Resuelve las promesas con un objeto FormData

Llamar a cualquiera de los métodos anteriores devuelve una nueva promesa. Dado que nuestra respuesta API es una cadena JSON, la que queremos usar es json() :

fetch(url)
    .then(res => res.json())
    .then(data => {
        // code to handle the response
    }).catch(err => {
        console.error('Error: ', err);
    });

¡Excelente! Hemos terminado con la parte de la solicitud de la API Fetch. Ahora es el momento de escribir algo de código JavaScript estándar. Vamos a crear dos funciones auxiliares para añadir y crear nuevos elementos:

// create an element
const createNode = (elem) => {
    return document.createElement(elem);
};

// append an element to parent
const appendNode = (parent, elem) => {
    parent.appendChild(elem);
}

Ahora podemos pasar a analizar el objeto JSON, crear y agregar elementos de lista a nuestra lista desordenada:

// ...
.then(data => {
    // iterate over users
    data.map((user) => {
        // create the elements
        let li = createNode('li'),
            img = createNode('img'),
            span = createNode('span');
        img.src = user.avatar_url;
        span.innerText = user.login;
        // append all elements
        appendNode(li, img);
        appendNode(li, span);
        appendNode(ul, li);
    });
})
// ...

El código anterior se explica por sí mismo. Iteramos sobre todos los usuarios y para cada usuario, creamos un elemento de lista, una imagen y un intervalo. Actualizamos la fuente de la imagen, establecemos el texto de extensión en el nombre para mostrar del usuario y luego lo agregamos a su padre. Eso es todo.

Así es como se ve en el navegador (después de agregar algo de CSS de Bootstrap):

Y el código completo de nuestra solicitud Fetch es el siguiente:

// create an element
const createNode = (elem) => {
    return document.createElement(elem);
};

// append an element to parent
const appendNode = (parent, elem) => {
    parent.appendChild(elem);
}

// List Element
const ul = document.querySelector('#users');

// GitHub API URL
const url = 'https://api.github.com/users';

// make the API call
fetch(url)
    .then(res => res.json())
    .then(data => {
        // iterate over users
        data.map((user) => {
            // create the elements
            let li = createNode('li'),
                img = createNode('img'),
                span = createNode('span');
            img.src = user.avatar_url;
            span.innerText = user.login;
            // append all elements
            appendNode(li, img);
            appendNode(li, span);
            appendNode(ul, li);
        });
    }).catch(err => {
        console.error('Error: ', err);
    });

Uso de Obtener datos POST

La API Fetch no se limita solo a las solicitudes GET. Puede realizar todos los demás tipos de solicitudes (POST, PUT, DELETE, etc.) con encabezados de solicitud personalizados y datos de publicación. Este es un ejemplo de una solicitud POST:

const url = 'https://reqres.in/api/users';

// post body data 
const user = {
    first_name: 'John',
    last_name: 'Doe',
    job_title: 'Blogger'
};

// request options
const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

// send POST request
fetch(url, options)
    .then(res => res.json())
    .then(res => console.log(res));

En lugar de objeto literal, también podemos crear un objeto de solicitud con todas las opciones y pasarlo a fetch() método:

const url = 'https://reqres.in/api/users';

// post body data 
const user = {
    first_name: 'John',
    last_name: 'Doe',
    job_title: 'Blogger'
};

// create request object
const request = new Request(url, {
    method: 'POST',
    body: JSON.stringify(user),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
});

// pass request object to `fetch()`
fetch(request)
    .then(res => res.json())
    .then(res => console.log(res));