El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

En JavaScript, el manejo de operaciones asíncronas es esencial para crear aplicaciones web eficientes y responsivas. Las promesas y async/await son dos herramientas poderosas que facilitan el trabajo con código asíncrono. En esta sección, aprenderás cómo funcionan las promesas y cómo async/await puede simplificar su uso.

Promesas

¿Qué es una Promesa?

Una promesa es un objeto que representa la eventual finalización (o falla) de una operación asíncrona y su valor resultante. Una promesa puede estar en uno de tres estados:

Pendiente (Pending): La operación aún no se ha completado.
Cumplida (Fulfilled): La operación se completó con éxito.
Rechazada (Rejected): La operación falló.

Creación de una Promesa

Para crear una promesa, se utiliza el constructor Promise, que toma una función con dos parámetros: resolve y reject.

const miPromesa = new Promise((resolve, reject) => {
    // Simulamos una operación asíncrona con setTimeout
    setTimeout(() => {
        const exito = true; // Cambia a false para simular un error
        if (exito) {
            resolve('¡Operación exitosa!');
        } else {
            reject('Ocurrió un error.');
        }
    }, 2000);
});

Consumo de una Promesa

Para manejar el resultado de una promesa, se utilizan los métodos then y catch.

miPromesa
    .then((mensaje) => {
        console.log(mensaje); // ¡Operación exitosa!
    })
    .catch((error) => {
        console.error(error); // Ocurrió un error.
    });

Ejemplo Práctico

function obtenerDatos() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const datos = { id: 1, nombre: 'Juan' };
            resolve(datos);
        }, 1000);
    });
}

obtenerDatos()
    .then((datos) => {
        console.log(datos); // { id: 1, nombre: 'Juan' }
    })
    .catch((error) => {
        console.error(error);
    });

Async/Await

¿Qué es Async/Await?

async y await son palabras clave que permiten escribir código asíncrono de manera más clara y legible. async se utiliza para declarar una función asíncrona, y await se utiliza para esperar a que una promesa se resuelva.

Funciones Asíncronas

Una función declarada con async siempre devuelve una promesa.

async function miFuncionAsincrona() {
    return '¡Hola!';
}

miFuncionAsincrona().then((mensaje) => console.log(mensaje)); // ¡Hola!

Uso de Await

await solo puede ser utilizado dentro de funciones declaradas con async. Pausa la ejecución de la función hasta que la promesa se resuelva.

async function obtenerDatosAsync() {
    try {
        const datos = await obtenerDatos();
        console.log(datos); // { id: 1, nombre: 'Juan' }
    } catch (error) {
        console.error(error);
    }
}

obtenerDatosAsync();

Ejemplo Práctico

function obtenerUsuario(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const usuario = { id, nombre: 'Ana' };
            resolve(usuario);
        }, 1000);
    });
}

async function mostrarUsuario() {
    try {
        const usuario = await obtenerUsuario(2);
        console.log(usuario); // { id: 2, nombre: 'Ana' }
    } catch (error) {
        console.error(error);
    }
}

mostrarUsuario();

Ejercicios Prácticos

Ejercicio 1: Promesas

Crea una función simularOperacion que devuelva una promesa que se resuelva después de 2 segundos con el mensaje "Operación completada".

function simularOperacion() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Operación completada');
        }, 2000);
    });
}

simularOperacion().then((mensaje) => console.log(mensaje)); // Operación completada

Ejercicio 2: Async/Await

Crea una función obtenerMensajeAsync que utilice async/await para esperar a que simularOperacion se resuelva y luego imprima el mensaje.

async function obtenerMensajeAsync() {
    const mensaje = await simularOperacion();
    console.log(mensaje); // Operación completada
}

obtenerMensajeAsync();

Soluciones

Solución Ejercicio 1

function simularOperacion() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Operación completada');
        }, 2000);
    });
}

simularOperacion().then((mensaje) => console.log(mensaje)); // Operación completada

Solución Ejercicio 2

async function obtenerMensajeAsync() {
    const mensaje = await simularOperacion();
    console.log(mensaje); // Operación completada
}

obtenerMensajeAsync();

Conclusión

En esta sección, has aprendido sobre las promesas y cómo async/await puede simplificar el manejo de operaciones asíncronas en JavaScript. Ahora tienes las herramientas necesarias para trabajar con código asíncrono de manera más eficiente y legible. En el siguiente módulo, profundizaremos en el Modelo de Objetos del Documento (DOM) y cómo interactuar con él utilizando JavaScript.

Promesas y Async/Await

Introducción

Promesas

¿Qué es una Promesa?

Creación de una Promesa

Consumo de una Promesa

Ejemplo Práctico

Async/Await

¿Qué es Async/Await?

Funciones Asíncronas

Uso de Await

Ejemplo Práctico

Ejercicios Prácticos

Ejercicio 1: Promesas

Ejercicio 2: Async/Await

Soluciones

Solución Ejercicio 1

Solución Ejercicio 2

Conclusión

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final