Cancelar una Promesa en JavaScript: Misión Imposible… ¿o no tanto?

Thu Dec 26 2024

Desarrollo

¡Hola Chiquis!👋🏻 En las películas de Misión Imposible, Ethan Hunt y su equipo se enfrentan a misiones extremadamente peligrosas que a menudo requieren ser abortadas en el último momento para evitar el desastre. De manera similar, en JavaScript, a veces necesitamos cancelar promesas para evitar operaciones innecesarias o costosas. Aquí te mostraré cómo cancelar una promesa en JavaScript y por qué es importante saber hacerlo.

Imagina que eres Ethan Hunt, el agente especial más famoso del mundo. Te encuentras en medio de una misión de alto riesgo, infiltrándote en un sistema informático altamente seguro. Para acceder a los datos que necesitas, lanzas un programa de hackeo (una promesa en nuestro mundo de la programación). Pero, de repente, la misión se complica y necesitas abortar la operación. ¿Cómo lo haces?

¿Por qué querríamos cancelar una promesa? En el mundo de la programación, cancelar una promesa puede ser necesario por varias razones:

Cambio de planes: El usuario decide que ya no necesita los datos que estaba solicitando.
Error en la operación: Se detecta un error y queremos detener la ejecución para evitar consecuencias no deseadas.
Optimización de recursos: Si una operación tarda demasiado, podemos cancelarla para liberar recursos del sistema.

La verdad sobre las promesas: son como una misión en marcha Una vez que una promesa se ha lanzado, es como una misión en marcha. No puedes simplemente detenerla con un botón. Las promesas son asíncronas, lo que significa que se ejecutan en segundo plano y no bloquean el hilo de ejecución principal. En JavaScript, puede haber situaciones en las que necesites detener una operación asincrónica antes de que se complete, como una solicitud de red que ya no es relevante.

Entonces, ¿cómo “cancelamos” una promesa? Aunque no podemos detener una promesa en seco, podemos implementar estrategias para simular una cancelación. A diferencia de otros lenguajes de programación, JavaScript no tiene una forma nativa de cancelar promesas. Sin embargo, podemos implementar soluciones creativas para lograrlo. Ejemplo Básico de una Promesa

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operación completada');
  }, 5000);
});

myPromise.then(result => console.log(result));

En este ejemplo, la promesa se resuelve después de 5 segundos. Pero, ¿qué pasa si queremos cancelarla antes de que se complete?

Solución: Una forma efectiva de cancelar promesas es utilizando AbortController, una API que permite cancelar operaciones asincrónicas.

const controller = new AbortController();
const signal = controller.signal;

const fetchData = () => {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      resolve('Datos recibidos');
    }, 5000);

    signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new Error('Operación cancelada'));
    });
  });
};

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

// Cancelar la promesa después de 2 segundos
setTimeout(() => {
  controller.abort();
}, 2000);

En este ejemplo, utilizamos AbortController para cancelar la promesa después de 2 segundos, antes de que se complete.

En Misión Imposible, Ethan Hunt debe tomar decisiones rápidas para abortar misiones cuando la situación cambia. De manera similar, en JavaScript, debemos ser capaces de controlar nuestras promesas para evitar problemas y mantener nuestro código limpio y eficiente. Ejemplo con Fetch:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch cancelado');
    } else {
      console.error('Error:', error);
    }
  });

// Cancelar la solicitud después de 2 segundos
setTimeout(() => {
  controller.abort();
}, 2000);

En este ejemplo, utilizamos AbortController para cancelar una solicitud fetch después de 2 segundos.

El detonador de la misión: El objeto AbortController es como el detonador que Ethan Hunt utiliza para hacer explotar un edificio. Puedes crearlo y asociarlo a una petición fetch o a cualquier otra operación asíncrona. Si necesitas detener la operación, simplemente llamas al método abort().

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/datos', { signal })
  .then(response => response.json())
  .then(data => {
    // Procesar los datos
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('La misión ha sido abortada');
    }
  });

// Para abortar la petición:
controller.abort();

Timeout: La bomba de tiempo: Esta técnica es como colocar una bomba de tiempo en una operación. Si la promesa no se resuelve antes de que expire el tiempo, la consideramos como cancelada.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('¡Misión cumplida!');
  }, 2000);
});

const timeoutId = setTimeout(() => {
    console.log('¡Misión abortada!');
  }, 1000);

promise.then(result => {
    clearTimeout(timeoutId); // Cancelar el timeout si la promesa se resuelve a tiempo
    console.log(result);
  });

Consideraciones adicionales

Operaciones complejas: Para operaciones más complejas, es posible que necesites implementar mecanismos de cancelación personalizados, como flags internos o callbacks de cancelación.
Limpieza: Asegúrate de liberar cualquier recurso que hayas asignado durante la operación, como conexiones a bases de datos o sockets.

Conclusión Cancelar una promesa en JavaScript no es tan sencillo como presionar un botón, pero con las herramientas adecuadas y un poco de creatividad, puedes simular una cancelación y evitar que tus operaciones se prolonguen innecesariamente. Al igual que Ethan Hunt, debes estar preparado para cualquier eventualidad y tener un plan de escape. Comprender cómo cancelar promesas es esencial para escribir código asincrónico robusto y eficiente.

¡Gracias por leer! 👇🏻 🚀 ¿Te ha gustado? Comparte tu opinión. Artículo completo, visita: https://lnkd.in/ewtCN2Mn https://lnkd.in/eAjM_Smy 👩💻 https://lnkd.in/eKvu-BHe https://dev.to/orlidev https://lnkd.in/ecHHabTD https://pin.it/2BuZ9N4n8 https://linktr.ee/orlidevs ¡No te lo pierdas!

Referencias: Imágenes creadas con: Copilot ( microsoft.com )

#PorUnMillóndeAmigos #MakeYourselfVisible

Cancelar una Promesa en JavaScript: Misión Imposible… ¿o no tanto?

https://my-million-friend-blog.vercel.app/blog/post-179/