Comment puis-je annuler une requête « fetch() » en vol en JavaScript ?

Annulation d'une requête HTTP fetch() en vol

L'avènement de l'API fetch() pour effectuer des requêtes à partir de JavaScript a soulevé des questions concernant son mécanisme d'annulation pour in -demandes de vols. Historiquement, il n’existait aucune option intégrée. Cependant, une mise à jour récente a introduit une voie d'annulation des requêtes.

À l'aide d'un AbortController

À compter du 20 septembre 2017, fetch() prend désormais en charge un paramètre de signal, permettant l'annulation des requêtes via un combinaison avec un AbortController. Les étapes suivantes décrivent le processus :

1. Créer un objet AbortController :

   • const contrôleur = new AbortController()

2. Obtenir le signal de l'AbortController :

   • const signal = controller.signal

3. Passer le signal à fetch() :

   • fetch(urlToFetch, { method: 'get', signal: signal })

4. Abandonner la requête si nécessaire :

   • controller.abort()

Exemple d'utilisation

Considérez l'exemple suivant (compatible avec Firefox 57) :

// Create an AbortController instance.
const controller = new AbortController();
const signal = controller.signal;

function beginFetching() {
  console.log('Now fetching');
  fetch("https://httpbin.org/delay/3", {
    method: 'get',
    signal: signal,
  })
  .then(function(response) {
    console.log(`Fetch complete. (Not aborted)`);
  })
  .catch(function(err) {
    console.error(` Err: ${err}`);
  });
}

function abortFetching() {
  console.log('Now aborting');
  // Abort the request.
  controller.abort();
}

Dans cet exemple, cliquer sur le bouton « Commencer » lancera la demande, tandis que le bouton « Abandonner » la terminera avant la fin.

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!