2.1 Creación de Promises
Los Promises son un objeto que representa la finalización (o fracaso) de una operación asíncrona y su resultado. Fueron introducidos en ES6 (ECMAScript 2015) y se convirtieron en el estándar para trabajar con código asíncrono en JavaScript.
Conceptos básicos
Un Promise puede estar en uno de tres estados:
- Pending (pendiente): estado inicial, ni cumplido ni rechazado.
- Fulfilled (cumplido): la operación se completó con éxito.
- Rejected (rechazado): la operación se completó con un error.
Creación de un Promise
Un Promise se crea usando el constructor Promise, que acepta una función ejecutora (executor function). Esta función toma dos argumentos: resolve y reject. Dentro de esta función se ejecuta código asíncrono, y en caso de éxito se llama a resolve, y en caso de error a reject.
Sintaxis:
const promise = new Promise((resolve, reject) => {
// Operación asíncrona
if (/* éxito */) {
resolve(value); // Éxito
} else {
reject(error); // Error
}
});
Ejemplo de creación de un Promise:
const myPromise = new Promise((resolve, reject) => {
const success = true; // Condición para el éxito
if (success) {
resolve('Operation was successful');
} else {
reject('Operation failed');
}
});
2.2 Uso de Promises
Método then
El método then se utiliza para manejar el éxito de un Promise. Acepta dos funciones: la primera para manejar el éxito y la segunda para manejar errores. Sin embargo, normalmente se utiliza el método catch para manejar errores.
Ejemplo de uso de then:
myPromise.then(
(successMessage) => {
console.log(successMessage); // Salida: Operation was successful
},
(errorMessage) => {
console.error(errorMessage); // Será llamado en caso de error
}
);
Método catch
El método catch se utiliza para manejar errores de un Promise. Acepta una función que será llamada en caso de que el Promise sea rechazado.
Ejemplo de uso de catch:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // Será llamado: Operation failed
});
Método finally
El método finally se utiliza para ejecutar código sin importar el resultado del Promise (éxito o error). No acepta argumentos y se ejecuta en cualquier caso después de que el Promise se cumpla o se rechace.
Ejemplo de uso de finally:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation completed'); // Será llamado en cualquier caso
});
2.3 Ejemplos de uso de Promises
Ejemplo 1: Operación asíncrona usando un Promise
Simulación de una operación asíncrona con un temporizador.
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Async operation was successful');
} else {
reject('Async operation failed');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Async operation completed');
});
Ejemplo 2: Ejecución secuencial de Promises
Simulación de operaciones asíncronas secuenciales.
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('First operation completed');
resolve('First result');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Second operation completed');
resolve(`Second result, received: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Both operations completed');
});
Ejemplo 3: Ejecución paralela de Promises con Promise.all
Simulación de operaciones asíncronas en paralelo.
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation One completed');
resolve('Result One');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Two completed');
resolve('Result Two');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('All operations completed');
console.log(results); // Salida: ['Result One', 'Result Two']
})
.catch((error) => {
console.error('One of the operations failed', error);
});
GO TO FULL VERSION