"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Comprensión de las promesas y el encadenamiento de promesas en JavaScript

Comprensión de las promesas y el encadenamiento de promesas en JavaScript

Publicado el 2024-11-05
Navegar:195

Understanding Promises and Promise Chaining in JavaScript

¿Qué es una promesa?

Una promesa en JavaScript es como una “promesa” que haces de hacer algo en el futuro. Es un objeto que representa la eventual finalización (o falla) de una tarea asincrónica y su valor resultante. En pocas palabras, una Promesa actúa como marcador de posición para un valor que aún no está disponible pero que lo estará en el futuro.

Estados de promesa

Las promesas pueden existir en uno de tres estados:

  1. Pendiente: el estado inicial de una Promesa, donde todavía está esperando que se complete la tarea asincrónica.
  2. Cumplido: el estado en el que la Promesa se completa exitosamente y el valor resultante está disponible.
  3. Rechazado: el estado en el que la Promesa falla y se devuelve un error en lugar del valor esperado.

¿Cómo funciona una promesa?

Una Promesa se crea utilizando el constructor de Promesa, que toma dos parámetros: resolver y rechazar; ambos son funciones.

Si la operación asíncrona tiene éxito, llama a la función de resolución para cumplir la promesa.
Si algo sale mal, llamas a la función de rechazo para indicar que la promesa fue rechazada debido a un error.
Puedes manejar el resultado de una Promesa usando .then() para el éxito y .catch() para el manejo de errores.

Ejemplo: Crear y consumir una promesa

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

La resolución(datos) devolverá los datos exitosos cuando se cumpla la Promesa.
Si algo sale mal, rechazar (error) generará un error que se puede manejar con .catch().

¿Qué es el encadenamiento de promesas?

Promise Chaining es el proceso de ejecutar una secuencia de tareas asincrónicas, una tras otra, utilizando Promesas. Cada método .then() de la cadena se ejecuta después de que se haya cumplido el anterior.

¿Por qué utilizar el encadenamiento de promesas?

Le permite escribir código limpio y legible para manejar múltiples operaciones asincrónicas en un orden específico. Cada .then() puede devolver un valor que se pasa al siguiente .then() de la cadena, lo que le permite manejar las tareas paso a paso.

Ejemplo: Encadenamiento de múltiples promesas

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });

En este ejemplo:

La Promesa comienza resolviendo con 1 después de 1 segundo.
Cada .then() subsiguiente recibe el resultado del anterior, lo duplica o triplica y lo pasa al siguiente .then().
El resultado se registra paso a paso: 1, 2, 6.
Manejo de errores en encadenamiento
Puede detectar cualquier error en la cadena de Promesa usando .catch(). Si algún .then() falla, la cadena se detiene y el error se pasa al bloque .catch().

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });

Beneficios clave de las promesas

  • Evita el infierno de las devoluciones de llamadas: las promesas simplifican la gestión de múltiples operaciones asíncronas, lo que de otro modo conduce a devoluciones de llamadas profundamente anidadas (también conocido como infierno de las devoluciones de llamadas).
  • Manejo de errores: puedes manejar todos los errores en una cadena con un solo .catch() al final.
  • Ejecución secuencial: el encadenamiento de promesas garantiza que las tareas asincrónicas se ejecuten en orden, lo que hace que sea más fácil razonar sobre el código.

Conclusión

Las promesas son una herramienta poderosa en JavaScript para manejar tareas asincrónicas. Con Promise Chaining, puede administrar múltiples operaciones asíncronas de manera limpia, legible y secuencial. Si comprende cómo crear y consumir promesas y encadenarlas, estará en el buen camino para dominar la programación asincrónica en JavaScript.

Declaración de liberación Este artículo se reproduce en: https://dev.to/nurmuhammadd/understanding-promises-and-promise-chaining-in-javascript-gkf?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3