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
});

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().

.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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *