Comment puis-je annuler les promesses en JavaScript pour la recherche par saisie anticipée ?

Promesse - est-il possible de forcer l'annulation d'une promesse

Dans ce scénario, l'utilisateur effectue une recherche par saisie anticipée, et chaque frappe déclenche un nouvel appel backend. À mesure que l'utilisateur tape plus vite, les anciennes requêtes deviennent inutiles et doivent être annulées.

Les promesses d'ES6, telles qu'elles sont actuellement, ne prennent pas en charge l'annulation prête à l'emploi. Cependant, des travaux sont en cours pour introduire des capacités d'annulation via AbortController, une primitive multiplateforme capable d'annuler les opérations asynchrones telles que les requêtes réseau.

Utilisation d'AbortController

En tant qu'approche moderne, AbortController fournit un signal objet qui peut être utilisé pour annuler des fonctions qui renvoient des promesses. La syntaxe ressemble à ceci :

<code class="javascript">async function somethingIWantToCancel({ signal } = {}) {
  // Use the signal object to manually adapt code for cancellation support
  const onAbort = (e) => {
    // Handle cancellation logic here
  };
  signal.addEventListener('abort', onAbort, { once: true });
  try {
    const response = await fetch('...', { signal });
  } catch (e) {
    if (e.name === 'AbortError') {
      // Deal with cancellation in caller
    } else {
      throw e;
    }
  } finally {
    signal.removeEventListener('abort', onAbort);
  }
}</code>

Dans cet exemple, la fonction SomethingIWantToCancel prend un paramètre de signal, qui est une instance de AbortController. L'écouteur signal.addEventListener enregistre un gestionnaire d'événement pour l'événement d'abandon, qui est déclenché lorsque l'opération est annulée. Le bloc final garantit que l'écouteur d'événement est supprimé une fois l'opération terminée.

Alternatives

Si AbortController n'est pas une option, une autre approche consiste à utiliser une bibliothèque tierce comme Bluebird, qui offre des capacités d'annulation.

Une autre alternative consiste à utiliser un jeton d'annulation. Cela implique de transmettre une fonction à la méthode qui peut être appelée pour annuler la requête.

Conclusion

Bien que les promesses ES6 ne prennent pas en charge l'annulation native, AbortController et d'autres alternatives fournissent des moyens d'annuler les opérations asynchrones. en JavaScript moderne. Pour les scénarios plus anciens, l’utilisation d’un jeton d’annulation ou d’une bibliothèque tierce peut toujours constituer une solution.

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!