Connaissez-vous vraiment AbortController ?-js tutoriel-php.cn

Connaissez-vous vraiment AbortController ?

De nombreux développeurs pensent peut-être comprendre AbortController, mais ses capacités vont bien au-delà des bases. De l'annulation des demandes de récupération à la gestion des écouteurs d'événements et des hooks React.

Savez-vous vraiment à quel point AbortController est puissant ? Voyons :

Annulation des demandes de récupération avec AbortController

L'utilisation d'AbortController avec fetch, bien sûr, est l'utilisation la plus courante.

Voici un exemple montrant comment AbortController peut être utilisé pour créer des requêtes de récupération annulables :

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

Copier après la connexion

L'exemple ci-dessus montre quelque chose qui était impossible avant l'introduction d'AbortController : la possibilité d'annuler les requêtes réseau par programme. Une fois annulé, le navigateur arrête la récupération, économisant ainsi la bande passante du réseau. Il est important de noter que l’annulation ne doit pas nécessairement être initiée par l’utilisateur.

Le contrôleur.signal fournit un objet AbortSignal, permettant la communication avec des opérations asynchrones comme la récupération et permettant de les annuler.

Pour combiner plusieurs signaux en un seul signal, vous pouvez utiliser AbortSignal.any(). Voici comment :

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Copier après la connexion

Différences entre AbortController et AbortSignal

AbortController : Utilisé pour annuler explicitement les signaux associés via controller.abort().
AbortSignal : Représente l'objet signal ; il ne peut rien annuler directement mais communique son état avorté.

Pour AbortSignal, vous pouvez :

Vérifiez si l'opération est interrompue à l'aide de signal.aborted.
Écoutez l'événement d'abandon :

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

Copier après la connexion

Lorsqu'une requête est annulée à l'aide d'AbortController, le serveur ne la traitera pas ni n'enverra de réponse, ce qui économisera de la bande passante et améliorera les performances côté client en réduisant les connexions simultanées.

Cas d'utilisation courants pour AbortController

Annulation des connexions WebSocket

Les API plus anciennes comme WebSocket ne prennent pas en charge nativement AbortSignal. Au lieu de cela, vous pouvez mettre en œuvre l'annulation comme ceci :

function abortableSocket(url, signal) {
  const socket = new WebSocket(url);
  if (signal.aborted) {
    socket.close();
    // Abort immediately if already canceled
  }
  signal.addEventListener('abort', () => socket.close());
  return socket;
}

Copier après la connexion

Remarque : si AbortSignal est déjà abandonné, il ne déclenchera pas l'événement d'abandon, vous devez donc vérifier et gérer ce cas dès le départ.

Suppression des écouteurs d'événements

Traditionnellement, la suppression des écouteurs d'événements nécessite de transmettre exactement la même référence de fonction :

window.addEventListener('resize', () => doSomething());
window.removeEventListener('resize', () => doSomething()); // This won’t work

Copier après la connexion

Avec AbortController, cela devient plus facile :

const controller = new AbortController();
const { signal } = controller;
window.addEventListener('resize', () => doSomething(), { signal });
// Remove the event listener by calling abort()
controller.abort();

Copier après la connexion

Pour les navigateurs plus anciens, pensez à ajouter un polyfill pour prendre en charge AbortController.

Gestion des tâches asynchrones dans React Hooks

Dans React, les effets peuvent s'exécuter par inadvertance en parallèle si le composant est mis à jour avant la fin d'une tâche asynchrone précédente :

function FooComponent({ something }) {
  useEffect(async () => {
    const data = await fetch(url + something);
    // Handle the data
  }, [something]);
  return ...>;
}

Copier après la connexion

Pour éviter de tels problèmes, utilisez AbortController pour annuler les tâches précédentes :

fetchButton.onclick = async () => {
  const controller = new AbortController();
  // Add a cancel button
  abortButton.onclick = () => controller.abort();
  try {
    const response = await fetch('/json', { signal: controller.signal });
    const data = await response.json();
    // Perform business logic here
  } catch (error) {
    const isUserAbort = error.name === 'AbortError';
    // AbortError is thrown when the request is canceled using AbortController
  }
};

Copier après la connexion

Utilisation d'AbortController dans Node.js

Modern Node.js inclut une implémentation setTimeout compatible avec AbortController :

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const response = await fetch(url, {
    // Abort fetch if any of the signals are triggered
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const data = await response.json();
} catch (error) {
  if (error.name === 'AbortError') {
    // Notify the user of cancellation
  } else if (error.name === 'TimeoutError') {
    // Notify the user of timeout
  } else {
    // Handle other errors, like network issues
    console.error(`Type: ${error.name}, Message: ${error.message}`);
  }
}

Copier après la connexion

Contrairement au navigateur setTimeout, cette implémentation n'accepte pas de rappel ; utilisez plutôt .then() ou wait.

TaskController pour la planification avancée

Les navigateurs évoluent vers planningr.postTask() pour la priorisation des tâches, avec TaskController étendant AbortController. Vous pouvez l'utiliser pour annuler des tâches et ajuster dynamiquement leur priorité :

if (signal.aborted) {
}
signal.addEventListener('abort', () => {});

Copier après la connexion

Si le contrôle de priorité n'est pas nécessaire, vous pouvez simplement utiliser AbortController à la place.

Conclusion

AbortController est un outil essentiel dans le développement JavaScript moderne, offrant un moyen standardisé de gérer et d'annuler les tâches asynchrones.

Son intégration dans les environnements de navigateur et Node.js met en évidence sa polyvalence et son importance.

Si vous ne connaissez pas AbortController, il est maintenant temps d'exploiter toutes ses capacités et d'en faire la pierre angulaire de votre boîte à outils de programmation asynchrone.

Nous sommes Connaissez-vous vraiment AbortController ?, votre premier choix pour déployer des projets Node.js sur le cloud.

Connaissez-vous vraiment AbortController ?

Connaissez-vous vraiment AbortController ? est la plate-forme sans serveur de nouvelle génération pour l'hébergement Web, les tâches asynchrones et Redis :

Support multilingue