Comment annuler des promesses en JavaScript

Salut les ninjas du code ! Aujourd'hui, on va parler d'un truc qui va vous faire passer pour un magicien auprès de vos collègues : comment annuler des promesses en JavaScript. Non, on ne parle pas de vos promesses de régime après les fêtes, mais bien des Promesses JavaScript. Attachez vos ceintures, ça va décoiffer ! 🌪️

Le problème des promesses trop fidèles

Vous le savez peut-être déjà, annuler une requête en JavaScript, c'est facile comme bonjour : un petit xhr.abort() pour les XHR ou un signal pour fetch, et hop, le tour est joué. Mais quid des promesses classiques ? Eh bien, figurez-vous que ces petites coquines n'ont pas d'API native pour être annulées. C'est comme si elles étaient trop fidèles. Aww, c'est mignon... mais pas pratique.

Méthode 1 : Promise.withResolvers(), le nouveau shérif en ville

Imaginez un peu : une nouvelle API qui vous donne les clés du royaume des promesses. C'est Promise.withResolvers(). Ça vous renvoie un objet contenant une nouvelle promesse et deux fonctions pour la résoudre ou la rejeter. C'est comme avoir un interrupteur pour vos promesses !

const buildCancelableTask = <T>(asyncFn: () => Promise<T>) => {
  let rejected = false;
  const { promise, resolve, reject } = Promise.withResolvers<T>();

  return {
    run: () => {
      if (!rejected) {
        asyncFn().then(resolve, reject);
      }
      return promise;
    },
    cancel: () => {
      rejected = true;
      reject(new Error('CanceledError'));
    },
  };
};
    

Avec ce petit bout de code, vous pouvez créer des tâches annulables comme un chef. C'est un peu comme avoir un bouton "Annuler" pour vos promesses. Cool, non ?

Méthode 2 : AbortController, le tueur de promesses

Si vous voulez jouer dans la cour des grands, il y a aussi AbortController. C'est comme un sniper pour vos promesses. Vous pouvez l'utiliser pour annuler plusieurs opérations en même temps. Pratique quand vous voulez faire le ménage dans vos promesses en cours.

const controller = new AbortController();
const { signal } = controller;

const cancelablePromise = (timeoutMs) => {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(() => {
      resolve("Promesse tenue !");
    }, timeoutMs);

    signal.addEventListener('abort', () => {
      clearTimeout(timeout);
      reject(new Error('Promesse annulée !'));
    });
  });
};

// Utilisation
const promise = cancelablePromise(5000);
promise.then(console.log).catch(console.error);

// Pour annuler
controller.abort();
    

Conclusion : Soyez le maître de vos promesses

Voilà, maintenant vous savez comment annuler des promesses en JavaScript sans passer pour un goujat. Que ce soit avec Promise.withResolvers() ou AbortController, vous avez le pouvoir de dire "stop" à vos promesses quand bon vous semble. C'est comme avoir un bouton "annuler" pour la vie, mais en code.

Maintenant, allez impressionner vos collègues avec vos nouvelles compétences de dompteur de promesses. Et n'oubliez pas : avec un grand pouvoir viennent de grandes responsabilités... et des bugs bizarres à déboguer à 3h du matin. Bon courage ! 😎🚀