Introducción
Las promesas son una característica fundamental en JavaScript y TypeScript para manejar operaciones asíncronas. Una promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. En este tema, aprenderemos cómo funcionan las promesas, cómo crearlas y cómo utilizarlas para manejar operaciones asíncronas de manera efectiva.
Conceptos Clave
-
Estados de una Promesa:
- Pendiente (Pending): Estado inicial, ni cumplida ni rechazada.
- Cumplida (Fulfilled): La operación se completó con éxito.
- Rechazada (Rejected): La operación falló.
-
Métodos Principales:
- then(): Se ejecuta cuando la promesa se cumple.
- catch(): Se ejecuta cuando la promesa es rechazada.
- finally(): Se ejecuta independientemente de si la promesa se cumple o se rechaza.
Creación de una Promesa
Para crear una promesa, se utiliza el constructor Promise, que toma una función de callback con dos parámetros: resolve y reject.
const miPromesa = new Promise<number>((resolve, reject) => {
const exito = true;
if (exito) {
resolve(42); // La operación fue exitosa
} else {
reject("Error: Algo salió mal"); // La operación falló
}
});Consumiendo una Promesa
Para consumir una promesa, utilizamos los métodos then, catch y finally.
miPromesa
.then((resultado) => {
console.log("Promesa cumplida con resultado:", resultado);
})
.catch((error) => {
console.error("Promesa rechazada con error:", error);
})
.finally(() => {
console.log("Operación completada");
});Ejemplo Práctico
Vamos a crear una función que simula una operación asíncrona, como una solicitud a una API, utilizando promesas.
function simularSolicitudAPI(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
const exito = Math.random() > 0.5;
if (exito) {
resolve("Datos recibidos de la API");
} else {
reject("Error al conectar con la API");
}
}, 2000);
});
}
simularSolicitudAPI()
.then((datos) => {
console.log(datos);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Solicitud completada");
});Ejercicio Práctico
Ejercicio 1: Crear y Consumir una Promesa
- Crea una función
leerArchivoque simule la lectura de un archivo y devuelva una promesa. - La promesa debe resolverse con el contenido del archivo después de 3 segundos si el archivo existe, o rechazarse con un error si el archivo no existe.
- Consume la promesa utilizando
then,catchyfinally.
function leerArchivo(existe: boolean): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (existe) {
resolve("Contenido del archivo");
} else {
reject("Error: El archivo no existe");
}
}, 3000);
});
}
leerArchivo(true)
.then((contenido) => {
console.log("Archivo leído con éxito:", contenido);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Operación de lectura de archivo completada");
});Solución
function leerArchivo(existe: boolean): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (existe) {
resolve("Contenido del archivo");
} else {
reject("Error: El archivo no existe");
}
}, 3000);
});
}
leerArchivo(true)
.then((contenido) => {
console.log("Archivo leído con éxito:", contenido);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log("Operación de lectura de archivo completada");
});Conclusión
En esta sección, hemos aprendido qué son las promesas, cómo crearlas y cómo consumirlas utilizando los métodos then, catch y finally. Las promesas son una herramienta poderosa para manejar operaciones asíncronas en TypeScript, y su comprensión es fundamental para trabajar con código asíncrono de manera efectiva. En la próxima sección, exploraremos async/await, una sintaxis más moderna y legible para trabajar con promesas.
Curso de TypeScript
Módulo 1: Introducción a TypeScript
- ¿Qué es TypeScript?
- Configuración del Entorno de TypeScript
- Tipos Básicos
- Anotaciones de Tipo
- Compilando TypeScript
Módulo 2: Trabajando con Tipos
Módulo 3: Tipos Avanzados
Módulo 4: Funciones y Módulos
- Tipos de Función
- Parámetros Opcionales y Predeterminados
- Parámetros Rest
- Módulos y Espacios de Nombres
- Decoradores
Módulo 5: Programación Asíncrona
Módulo 6: Herramientas y Mejores Prácticas
- Linting y Formateo
- Pruebas de Código TypeScript
- TypeScript con Webpack
- TypeScript con React
- Mejores Prácticas