AbortSignal

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

* Some parts of this feature may have varying levels of support.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'interface AbortSignal représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet AbortController.

Propriétés

L'interface AbortSignal hérite des propriétés de son interface parent EventTarget.

AbortSignal.aborted Lecture seule

Un Boolean (booléen) qui indique si les requêtes avec lesquelles le signal communique sont annulées (true) ou non (false).

Gestionnaire d'évènement

AbortSignal.onabort

appelé quand un évènement abort est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.

Méthodes

L'interface AbortSignal hérite des méthodes de son interface parent EventTarget.

Exemples

Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'API Fetch.

Tout d'abord, nous créons un contrôleur en utilisant le constructeur AbortController(), puis nous saisissons une référence associée à son objet AbortSignal au moyen de la propriété AbortController.signal.

Lorsque la requête fetch (extraction) est lancée, nous transmettons le paramètre AbortSignal en tant qu'option dans l'objet d'options de la requête (voir {signal} ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant AbortController.abort(), comme indiqué ci-dessous dans le second écouteur d'événements.

js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

Note : Lorsque abort() est appelé, la réponse fetch() rejette avec une erreur AbortError.

vous pouvez trouver un exemple de travail complet sur GitHub — voir abort-api (voir cas d'usage concret).

Spécifications

Specification
DOM
# interface-AbortSignal

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
AbortSignal
abort event
abort() static method
reason parameter
aborted
any() static method
reason
throwIfAborted
timeout() static method

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Voir aussi