Comment quitter les fonctions de rappel dans Async / AWAIT Élégamment?

Terminer gracieusement la fonction de rappel dans Async / Await

Comment sortir en toute sécurité d'une fonction de rappel avec un temps d'exécution incertain est un défi commun lors de l'utilisation de l'async / attendre des opérations asynchrones. Cet article fournira un scénario pour démontrer comment contrôler efficacement la sortie de la fonction de rappel dans l'environnement asynchrone / attendre.

Problème: Le code utilise MutationObserver pour écouter les modifications des propriétés des boutones. Lorsque les propriétés changent, vous devez quitter la fonction asynchrone. L'écriture traditionnelle de la promesse est facile à mettre en œuvre, mais lorsque le code est complexe, la promesse imbriquée réduira la lisibilité et la maintenabilité. L'objectif est de réécrire le code au style async / attendre tout en résolvant le problème de la façon de quitter la fonction asynchrone dans la fonction de rappel.

Exemple de code:

 // utilise la méthode d'écriture traditionnelle de promesse consta = (): promesse<void> => {
  retourner la nouvelle promesse ((résolution) => {
    const Callback = (mutations: mutationRecord []) => {
      // Écoutez les modifications de l'attribut du bouton, quittez la fonction résolve () ici;
    };
    const Observer = new MutationObserver (rappel);
    Observe.Observe (BUTUTEL, {Attributs: true});

    // Appelez la fonction de promesse, déclenchez l'événement de clic du bouton après le succès, puis écoutez les modifications de la propriété p (). Puis (() => {
      Buttonel.Click ();
    });
  });
};

// Utilisez Async / Await pour écrire const b = async (): promesse<void> => {
  const Callback = (mutations: mutationRecord []) => {
    // Écoutez les modifications des attributs de bouton, comment quitter la fonction ici?
  };
  const Observer = new MutationObserver (rappel);
  Observe.Observe (BUTUTEL, {Attributs: true});

  // Appelez la fonction de promesse, déclenchez l'événement de clic du bouton après le succès, puis écoutez les modifications de la propriété Aide P ();
  Buttonel.Click ();
};</void></void>

Solution:

Afin d'implémenter la même fonction que la fonction a dans Async / Await, vous pouvez utiliser Promise.withResolvers() . Cette méthode renvoie un objet contenant les fonctions de promesse et de résolution.

Code amélioré:

 const b = async (): promesse<void> => {
  const {promesse, résolve} = promest.withResolvers<void> ();

  const Callback = (mutations: mutationRecord []) => {
    résoudre(); // appelle résoudre () dans la fonction de rappel pour résoudre la promesse
  };
  const Observer = new MutationObserver (rappel);
  Observe.Observe (BUTUTEL, {Attributs: true});

  attendre p ();
  Buttonel.Click ();
  attendre la promesse; // attendez que la promesse résoudre};</void></void>

Description de la compatibilité:

Promise.withResolvers() est actuellement au stade de la proposition et tous les navigateurs ne sont pas soutenus nativement. Pour garantir la compatibilité, des polyfills, tels que core-js , peuvent être nécessaires. De même, les utilisateurs de TypeScript doivent mettre à jour vers la version 5.4 ou plus et configurer lib pour inclure esnext dans tsconfig.json .

Avec Promise.withResolvers() , vous pouvez appeler resolve() dans la fonction de rappel pour résoudre la promesse, contrôlant ainsi efficacement le processus de sortie de la fonction asynchrone / attente, évitant la nidification complexe de promesses et améliorant la lisibilité et la maintenabilité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!