Comprender las promesas frente a las devoluciones de llamada en JavaScript

Preguntas y respuestas clave para las pruebas de certificación

1. ¿Qué es una función de devolución de llamada y en qué se diferencia de una función normal?

   • Una función de devolución de llamada se pasa como argumento a otra función y se invoca para manejar operaciones asincrónicas. A diferencia de las funciones normales, las devoluciones de llamada están diseñadas para ejecutarse después de completar una determinada tarea.

2. ¿Cómo mejoran las promesas la legibilidad del código y administran operaciones asincrónicas en comparación con las devoluciones de llamada?

   • Las promesas permiten el encadenamiento y un mejor manejo de errores, lo que genera un código más legible y mantenible. Ayudan a evitar estructuras profundamente anidadas conocidas como "infierno de devolución de llamadas".

3. ¿Cuáles son los estados principales de una Promesa y cómo hacen la transición entre estos estados?

   • Los estados principales son: Pendiente (estado inicial), Cumplido (operación completada exitosamente) y Rechazado (operación fallida). Una promesa pasa de Pendiente a Cumplida o Rechazada.

4. ¿Cómo se pueden manejar los errores usando Promesas y cómo se compara esto con el manejo de errores con devoluciones de llamada?

   • Las promesas proporcionan un método de captura para manejar errores de manera simplificada, mientras que el manejo de errores con devoluciones de llamada a menudo requiere pasar objetos de error y múltiples comprobaciones en devoluciones de llamada anidadas.

5. ¿Cuál es la diferencia entre Promise.all y Promise.race, y cuándo usarías cada uno?

   • Promise.all se resuelve cuando se resuelven todas las promesas de entrada, lo que lo hace útil para esperar a que se completen varias operaciones asincrónicas. Promise.race se resuelve tan pronto como se resuelve una de las promesas de entrada, lo que resulta útil para escenarios en los que se necesita el resultado de la primera operación completa.

6. ¿Cómo simplifica la sintaxis async/await el trabajo con Promesas y cuáles son las reglas para usar await?

   • La sintaxis async/await permite escribir código asincrónico de manera sincrónica, mejorando la legibilidad. await solo se puede usar dentro de funciones asíncronas y pausa la ejecución hasta que se resuelva la Promesa.

Introducción

En el panorama cambiante de JavaScript, administrar operaciones asincrónicas de manera eficiente es clave para crear aplicaciones web de alto rendimiento. Si bien las devoluciones de llamada eran el enfoque original, Promises introdujo una forma más estructurada y legible de manejar tareas asincrónicas. Este blog profundiza en las complejidades del uso de Promesas versus devoluciones de llamadas, suponiendo que ya tenga una comprensión básica de estos conceptos.

Beneficios de las promesas sobre las devoluciones de llamadas

Legibilidad y mantenibilidad mejoradas

Las devoluciones de llamadas, aunque funcionales, a menudo conducen a estructuras profundamente anidadas conocidas como "infierno de devoluciones de llamadas", lo que dificulta la lectura y el mantenimiento del código.

Ejemplo de infierno de devolución de llamada:

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

Mejorado con promesas:

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

Manejo de errores

Con las devoluciones de llamada, el manejo de errores puede volverse engorroso ya que es necesario pasar objetos de error y manejarlos en cada nivel.

Manejo de errores con devoluciones de llamada:

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

Manejo de errores con promesas:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Métodos de promesa avanzados

Promesa.todo

Promise.all es útil cuando necesitas esperar a que se completen varias operaciones asincrónicas antes de continuar.

Ejemplo:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

promesa.raza

Promise.race es beneficioso cuando necesitas el resultado de la operación más rápida.

Ejemplo:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

Simplificando el código asincrónico con async/await

La sintaxis async/await le permite escribir código asincrónico que parece sincrónico, lo que mejora la legibilidad y reduce la complejidad del encadenamiento de Promesas.

Ejemplo:

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

Conclusión

Si bien las devoluciones de llamada sentaron las bases para manejar operaciones asincrónicas en JavaScript, las promesas han mejorado significativamente la legibilidad, la mantenibilidad y las capacidades de manejo de errores del código asincrónico. Comprender cómo y cuándo utilizar estas herramientas de forma eficaz es crucial para el desarrollo de JavaScript moderno. Con Promises y la sintaxis async/await, los desarrolladores pueden escribir código más limpio y manejable, allanando el camino para aplicaciones más sólidas.