Promesas de JavaScript | audacia
En JavaScript, una promesa es un objeto que representa un valor que puede no estar disponible todavía, pero lo estará en algún momento en el futuro. Podemos aprovechar estas promesas para manejar operaciones asincrónicas.
Contenido
sintaxis
Para crear una promesa, podemos llamar al constructor Promise con el new
operador:
const promise = new Promise((resolve, reject) => {
// business logic
});
Té Promise
constructor toma un solo parámetro: una función ejecutora. Esta función acepta dos parámetros opcionales: resolve
y reject
. Considere el siguiente ejemplo:
const p = new Promise((resolve, reject) => {
// business logic
if (/* success condition */){
resolve(/* optional arguments */);
} else {
reject(/* optional arguments */);
}
});
En el fragmento anterior, primero realizamos las operaciones y la lógica comercial requerida. Entonces, si alguna condición fue exitosa, llamamos resolve
con los argumentos necesarios. Si la condición no tuvo éxito, llamamos reject
(nuevamente, junto con los argumentos necesarios).
Estados de promesa
Toda promesa tiene un existencias, u objetivo específico a llevar a cabo (por ejemplo, obtener datos de una API, retrasar la ejecución con setTimeout, etc.). Dependiendo del estado de esa acción, una promesa puede existir en uno de tres estados:
- cumplido: la acción de la promesa ha tenido éxito
- rechazado: la acción de la promesa ha fallado
- pendiente: la promesa no ha sido cumplida ni rechazada
Es importante señalar que una promesa no puede cambiar su estado de cumplida a rechazada (y viceversa). Cuando se ha cumplido una promesa oro rechazada, la promesa se considera establecido.
Ahora que hemos visto cómo son las promesas y en qué estados pueden vivir, ¿cómo hacemos consumidor ¿prometido? Es decir, ¿cuáles son algunas formas en que podemos realmente manejar ¿Un estado “cumplido” o un estado “rechazado”?
Manejo de estados de promesa
Los objetos Promise tienen dos métodos incorporados para manejar su estado: el .then()
método para manejar el estado cumplido de una promesa, y .catch()
para manejar su estado rechazado. Ambos métodos devuelven un nuevo objeto de promesa, haciendo que los métodos se puedan encadenar (más sobre esto más adelante).
El primero de estos métodos, .then()
acepta dos parámetros: onFulfilled
y onRejected
, el último de los cuales es opcional. Estas son funciones para invocar si la promesa se cumple o se rechaza, respectivamente. Considere el siguiente ejemplo:
const promise = new Promise((resolve, reject) => {
resolve("Message: Success!");
});
promise.then((value) => {
console.log(value); // "Message: Success!"
});
Cuando la promesa se resuelve con éxito y alcanza un estado cumplido, podemos manejar ese estado a través de la promesa. .then()
método. Lo hacemos registrando una función de devolución de llamada (es decir, nuestra onFulfilled
función) para utilizar la cadena resuelta (es decir, "Message: Success!
), luego imprímalo en la consola.
En el caso de un estado rechazado, podemos usar el segundo parámetro opcional pasado a .then()
(es decir, onRejected
). Sin embargo, si hubiera algún error, el onRejected
la devolución de llamada no podría manejarlo. Como tal, una forma más apalancada es llamar .catch()
.
Té .catch()
método acepta un solo onRejected
parámetro. Esta devolución de llamada se invoca si se rechaza alguna promesa en la cadena. Considere el siguiente ejemplo:
const promise = new Promise((resolve, reject) => {
throw new Error("Something went wrong");
});
promise.catch((error) => {
console.error(error); // "Something went wrong"
});
En el caso de un error como se ve arriba, la promesa entra en un estado rechazado. A través del uso de la función integrada de la promesa .catch()
método, registramos una devolución de llamada para manejar ese error, que simplemente registra el error en la consola.
Poniendolo todo junto
Recuerde que anteriormente mencionamos que tanto el then()
y .catch()
cada método devolver ellos mismos una nueva promesa. Esto nos permite encadenar tales operaciones:
const promise = new Promise((resolve, reject) => {
reject("Promise is rejected");
});
promise
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});
// Output: "Promise is rejected"
En este ejemplo, usamos .then()
registrar el resultado de nuestra promesa cuando se cumpla, y .catch()
para registrar cualquier error que ocurra cuando se rechace.
Con todo esto en mente, exploraremos dónde brillan realmente las capacidades de las promesas: el manejo de operaciones asincrónicas.
Operaciones asíncronas
En JavaScript, el código se ejecuta en un solo hilo. Es decir, cualquier función de devolución de llamada que registremos para manejar el estado de promesa aún se ejecuta en ese subproceso principal. Sin embargo, usar una promesa nos permite crear operaciones asincrónicas (por ejemplo, realizar una solicitud de API) que se ejecutan «fuera» de nuestro entorno local. El subproceso principal puede seguir ejecutándose mientras espera que respondan dichas operaciones. A su vez, cualquier función de devolución de llamada que registremos para manejar la respuesta se llama de forma asíncrona.
Considere el siguiente ejemplo:
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => console.log(json));
Primero usamos fetch
hacer un GET
solicitud a nuestro punto final de API (más información sobre JSONPlaceholder aquí). El método devuelve una promesa que podemos resolver en un Response
objeto. Lo manejamos con el primero .then()
en la cadena analizando su entrada JSON (es decir, response
) en un objeto literal de JavaScript. Desde response.json()
devuelve una promesa, lo manejamos con el segundo .then()
simplemente registrando el objeto en la consola.
Como resultado, vemos lo siguiente en la consola, que representa la respuesta de la API:
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto"
}
Más información sobre las promesas
Las promesas son una excelente manera de manejar operaciones asincrónicas. Además de manejar estados de promesa con then()
y catch()
también puede considerar async
/ await
también.
Para obtener más información acerca de las promesas, consulte estos recursos:
O explore el programa Intermediate JavaScript Nanodegree para dominar el lenguaje de programación más popular del mundo.