Blog


Async/await en JavaScript

ASYNC/AWAIT EN JAVASCRIPT

03 / 03 / 2023 Otros

Async/await es un modelo de programación asincrónica que se utiliza en el lenguaje de programación JavaScript para manejar las operaciones que pueden tardar mucho tiempo en completarse. Este modelo de programación se introdujo en la versión de ECMAScript 2017 y se ha convertido en una de las formas más populares de manejar la asincronía en JavaScript.

En términos simples, async/await permite escribir código asincrónico de una manera más clara y fácil de leer que los callbacks o las promesas. En lugar de tener que encadenar una serie de callbacks o manejar una serie de promesas anidadas, async/await proporciona una sintaxis más sencilla que se asemeja mucho al código sincrónico tradicional.

La sintaxis de async/await

La sintaxis de async/await es relativamente sencilla. En lugar de utilizar callbacks o promesas, async/await utiliza dos nuevas palabras clave: async y await.

La palabra clave async se utiliza para definir una función asíncrona. Por ejemplo:

const miFuncionAsincrona = async () => {
    // Código asíncrono
}

La palabra clave await se utiliza dentro de una función asíncrona para esperar a que una promesa se resuelva antes de continuar con la ejecución del código. Por ejemplo:

const miFuncionAsincrona = async () => {
    const resultado = await miPromesa();
    // Continuar con el código después de que la promesa se haya resuelto
}

En el ejemplo anterior, miPromesa() es una función que devuelve una promesa. La palabra clave await espera a que la promesa se resuelva antes de continuar con la ejecución del código.

Manejando errores en async/await

Una de las ventajas de async/await es que hace que el manejo de errores sea mucho más fácil. En lugar de tener que manejar los errores con callbacks o con catch() en las promesas, se puede utilizar un bloque try/catch en la función asíncrona.

Por ejemplo:

const miFuncionAsincrona = async () => {
    try {
        const resultado = await miPromesa();
        // Continuar con el código después de que la promesa se haya resuelto
    } catch (error) {
        // Manejar el error
    }
}

En el ejemplo anterior, si la promesa devuelve un error, el código dentro del bloque catch se ejecutará y se podrá manejar el error de una manera mucho más clara y fácil de leer.

Usos de async/await

Async/await se utiliza para manejar operaciones asíncronas en JavaScript. Algunos ejemplos de situaciones en las que se puede utilizar async/await incluyen:

Llamadas a API: cuando se realizan llamadas a una API, es común que la respuesta no se devuelva inmediatamente. Con async/await, se puede esperar a que la respuesta de la API se resuelva antes de continuar con la ejecución del código.

const obtenerDatosDeAPI = async () => {
    const respuesta = await fetch('https://mi-api.com/datos');
    const datos = await respuesta.json();
    // Continuar con el código después de que se hayan obtenido los datos
}

Operaciones de E/S: en JavaScript, las operaciones de E/S, como leer o escribir en un archivo, pueden ser lentas. Con async/await, se puede esperar a que la operación de E/S se complete antes de continuar con la ejecución del código.

const leerArchivo = async () => {
    const archivo = await fs.promises.readFile('ruta/a/mi/archivo');
    // Continuar con el código después de leer el archivo
}

Animaciones: cuando se realizan animaciones en JavaScript, es importante que la animación se ejecute de manera suave y sin interrupciones. Con async/await, se puede esperar a que una animación se complete antes de continuar con la ejecución del código.

const animarElemento = async () => {
    await elemento.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1000 });
    // Continuar con el código después de la animación
}

Aunque las promesas y los callbacks siguen siendo importantes en ciertos casos, async/await proporciona una sintaxis más clara y fácil de leer que se asemeja al código sincrónico tradicional. Al utilizar async/await, se puede manejar la asincronía de manera más eficiente y manejar los errores de manera más fácil.



ARTÍCULOS RELACIONADOS