Consumiento una API en JavaScript utilizando Async / Await

js_api_with_async_await.md

Consumiendo una API en JavaScript utilizando Async / Await

Javascript nos brinda una forma alternativa de realizar las peticiones HTTP utilizando async y el operador await

• async hace que una función devuelva una Promesa
• await hace que una función espere una Promesa

Nota: La finalidad de las funciones async/await es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de Promises. Del mismo modo que las Promises son semejantes a las devoluciones de llamadas estructuradas, async/await se asemejan a una combinación de generadores y promesas.

Documentación: async | await

Método fetch()

En JavaScript el método fetch() requiere dos parámetros:

• el primero parámetro es un string '' que contiene la uri del endpoint, que normalmente está compuesta por dos partes:
  • la primera es la url que es la base de la API
  • la segunda es lo que agregas para obtener ell endpoint completo
• el segundo parámetro es un objeto {} de opciones que contiene configuraciones para personalizar la solicitud, por ejemplo: method, headers, body, y otros más.

Documentación: fetch()

Cómo lo haremos?

Comencemos con un ejemplo simple utilizando el método GET y lo analizamos

const getData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
        // Aquí manejamos el error que devolvió el request HTTP 
        console.log('error: ', response.status, response.statusText);
        return {error: {status: response.status, statusText: response.statusText}};
    };
    const data = await response.json();
    return data;
};

Recordemos que GET es el método por default. Por ello no es obligatorio escribir el segundo parámetro del fetch()

Analicemos esta función

1. Definimos una arrow function, y la denominamos con un nombre significativo, en este ejemplo getData
2. Determinamos que esa función flecha será asíncrona async porque es una petición HTTP y su respuesta no es inmediata
3. A continuación, definimos una constante response que esperará await la respuesta del fetch(). En esa constante almacenamos la respuesta de la petición.
4. Luego evalúamos la respuesta. (Esto comprueba con el valor de response.ok
5. Si la respuesta no es válida, registramos el error que nos brinda el protocolo HTTP (100, 300, 400, 500) y si es necesario realizamos acciones para darle tratamiento a ese error.
6. Si la respuesta es válida, en la constante data guardaremos los datos con formato JSON y retornamos esa respuesta.

Nota: El protocolo HTTP siempre nos brindará una respuesta. Si esa respuesta es buena o no lo sabremos mediante los Códigos de estado de respuesta HTTP

Ejemplo método GET

Ahora hagamos un código más completo

const url_base = 'https://jsonplaceholder.typicode.com';

const getData = async () => {
    const url = url_base + '/posts';
    const options = {
        method: "GET"
    };
    const response = await fetch(url, options);
    if (!response.ok) {
        /* Aquí manejamos el error que devolvió el request HTTP  */
        console.log('error: ', response.status, response.statusText);
        return {error: {status: response.status, statusText: response.statusText}};
    }
    const data = await response.json();
    return data;
};

Ejemplo método POST

Ahora que ya conocemos como funciona, veamos un ejemplo del método POST

const url_base = 'https://jsonplaceholder.typicode.com';
const dataToSend = {
    title: 'foo',
    body: 'bar',
    userId: 1,
}

const createData = async () => {
    const url = url_base + '/posts';
    const options = {
        method: 'POST',
        body: JSON.stringify(dataToSend),
        headers: {
           'Content-Type': 'application/json'
        }
    };

    const response = await fetch(url, options);
    if (!response.ok) {
        /* Aquí manejamos el error que devolvió el request HTTP  */
        console.log('error: ', response.status, response.statusText);
        return {error: {status: response.status, statusText: response.statusText}};
    };
    const data = await response.json();
    return data;
};

Ejemplo método PUT

Ejemplo de una petición con método PUT

const url_base = 'https://jsonplaceholder.typicode.com';
const dataToSend = {
    id: 1,
    title: 'new foo',
    body: 'new bar',
    userId: 1,
}
const updateData = async () => {
    const url = url_base + '/posts/1';
    const options = {
        method: 'PUT',
        body: JSON.stringify(dataToSend),
        headers: {
           'Content-Type': 'application/json'
        }
    };
    const response = await fetch(url, options);
    if (!response.ok) {
        /* Aquí manejamos el error que devolvió el request HTTP  */
        console.log('error: ', response.status, response.statusText);
        return {error: {status: response.status, statusText: response.statusText}};
    };
    const data = await response.json();
    return data;
};

Ejemplo método DELETE

Ejemplo de una petición con el método DELETE

const url_base = 'https://jsonplaceholder.typicode.com';

const deleteData = async () => {
    const url = url_base + '/posts/1';
    const options = {
        method: 'DELETE'
    };
    const response = await fetch(url, options);
    if (!response.ok) {
        /* Aquí manejamos el error que devolvió el request HTTP  */
        console.log('error: ', response.status, response.statusText);
        return {error: {status: response.status, statusText: response.statusText}};
    };
    const data = await response.json();
    return data;
};