admin

¿Cómo utilizar de forma correcta el Async/Await para códigos de respuesta secuencial?

Async y await son características que nos permiten escribir código asíncrono de forma más sencilla y fácil de leer.

En esencia async/await es una forma de trabajar con funciones asíncronas de JavaScript que se introdujo en ECMAScript 2017. La principal ventaja de async/await es que nos permite escribir código asíncrono de una manera que se asemeja más a la forma en que escribimos código síncrono.

En lugar de anidar callbacks o utilizar Promises encadenadas, podemos simplemente marcar una función como asíncrona con la palabra clave «async» y luego utilizar la palabra clave «await» dentro de la función para esperar a que se resuelva una Promise antes de continuar.

const countUntil = (timeInMiliseconds) => {
    return new Promise((resolve, reject)=>{
        setTimeout(() => {
            resolve('Respuesta de consulta con valor en milisegundos: '+timeInMiliseconds);
        }, timeInMiliseconds);
    });
}

const init = async () => {
    console.log("Log 1")
    const response = await countUntil(1000);
    console.log(response);
    console.log("Log 2")
}

init();

Por ejemplo, en el código anterior se realiza la ejecución de una función donde se utiliza await para invocar una promesa, esto ocasiona que la respuesta se muestre de forma secuencial, es decir que en la consola se mostrará lo siguiente:

#Log 1
Respuesta de consulta con valor en milisegundos: 1000
#Log 2

En conclusión, await se puede utilizar para detener el procesamiento secuencial del código de una función hasta que se obtenga la resolución de otra y así tener una respuesta ordenada y sin necesidad de anidar funciones o utilizar callbacks para obtener la respuesta de un método asíncrono.

<solutionops-team> Happy Coding! </solutionops-team>

Pendiente (Pending) / Resulta (Fulfilled) / Rechazada (Rejected)

En la programación asincrónica de JavaScript, las promesas son una función esencial. Su uso permite a los programadores escribir código que maneja eventos futuros sin bloquear el hilo principal de ejecución. En esencia, una promesa representa un valor que puede no estar disponible en el momento en que se crea. En este artículo, se abordarán los distintos estados que puede tener una promesa en JavaScript, así como la forma correcta de manejarlos.

Una promesa en JavaScript puede estar en uno de los siguientes tres estados:

1) Pendiente: esto ocurre cuando la promesa es creada y está a la espera de ser resuelta o rechazada.

2) Resuelta: una promesa se encuentra en este estado cuando la operación que realizó ha sido completada con éxito. En este caso, la promesa tendrá un valor asignado que es pasado como argumento a la función de resolución de la promesa.

3) Rechazada: una promesa se encuentra en este estado cuando la operación que realizó no ha sido completada con éxito. En este caso, la promesa tendrá un motivo asignado que es pasado como argumento a la función de rechazo de la promesa.

function init() {
    return new Promise(async (resolve, reject)=>{
        try {
            const request = axios.get('https://solutionops.cl').then((response)=>{
                console.log("Respuesta Resuelta: ", response.status);
                resolve("Respuesta Resuelta: " + response.status)
            });

            console.log("Respuesta Pending: ", request);

        } catch (error) {
            console.log("Respuesta de Reject: ", error);
            reject("Respuesta de Reject: " + error)
        }
    });
    
}

init();

Por ejemplo, en el código anterior se ejecuta un request HTTP hacia el home del sitio de solutionops.cl, el mismo debe retornar una respuesta de código 200, sin embargo por cómo se ejecuta el código de javascript primero termina imprimiendo el valor de la variable request, la cuál por no haber sido resuelta retorna como Pending, por otra parte al momento de obtener una respuesta se dirijirá al then y se imprimirá el resultado del código de respuesta satisfactoriamente generando la siguiente respuesta en la consola/terminal:

Respuesta Pending:  Promise {  }
Respuesta Resuelta:  200

En conclusión, las promesas son una característica clave de la programación asincrónica en JavaScript. Al comprender los diferentes estados de las promesas, podemos escribir un código más eficiente y manejar adecuadamente las respuestas de la API. Asegúrate de siempre manejar los estados de las promesas adecuadamente y capturar los errores de manera adecuada.

<solutionops-team> Happy Coding! </solutionops-team>