AbortSignal
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2018.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
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.abortedLecture 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
abortest 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.
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
Chargement…
Voir aussi
- API Fetch
- Abortable Fetch par Jake Archibald (en)