Comment puis-je interrompre les requêtes de récupération HTTP en JavaScript ?

Interruption des requêtes de récupération HTTP avec annulation

L'introduction de fetch() dans JavaScript a révolutionné la gestion des requêtes HTTP, offrant une interface polyvalente et intuitive. Cependant, des inquiétudes surviennent souvent quant à la possibilité de mettre fin à ces requêtes prématurément.

Mécanismes d'abandon dans fetch()

Depuis septembre 2017, fetch() a incorporé une amélioration significative : la prise en charge du paramètre signal . Ce paramètre permet aux développeurs d'annuler les requêtes à l'aide d'un AbortController et de son AbortSignal correspondant. Au départ, la prise en charge des navigateurs était limitée, mais désormais (depuis mars 2020), la plupart des principaux navigateurs (Edge, Firefox, Chrome, Safari, Opera et autres) adoptent pleinement cette fonctionnalité.

Mise en œuvre

Le processus d'annulation comprend quatre étapes :

1. Créer un AbortController :

const controller = new AbortController()

2. Obtenir le AbortSignal :

const signal = controller.signal

3. Passez le signal pour récupérer() :

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

4. Abandonner la demande à chaque fois souhaité :

controller.abort();

Exemple

Pour illustrer comment cela fonctionne dans la pratique, considérons l'exemple suivant :

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

/*
// Register a listenr.
signal.addEventListener("abort", () => {
    console.log("aborted!")
})
*/


function beginFetching() {
    console.log('Now fetching');
    var urlToFetch = "https://httpbin.org/delay/3";

    fetch(urlToFetch, {
            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.
    controller.abort()
}

En appelant controller.abort() , la demande peut être interrompue à tout moment.

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!