Wie kann ich eine „fetch()'-Anfrage während des Flugs in JavaScript abbrechen?

Stornieren einer In-Flight-HTTP-fetch()-Anfrage

Das Aufkommen der fetch()-API zum Senden von Anfragen aus JavaScript hat Fragen bezüglich des Stornierungsmechanismus für in aufgeworfen -Fluganfragen. Historisch gesehen gab es keine integrierten Optionen. Durch ein aktuelles Update wurde jedoch ein Pfad zum Abbrechen von Anforderungen eingeführt.

Verwendung eines AbortControllers

Mit Wirkung vom 20. September 2017 unterstützt fetch() jetzt einen Signalparameter, der das Abbrechen von Anforderungen über a ermöglicht Kombination mit einem AbortController. Die folgenden Schritte beschreiben den Prozess:

1. Erstellen Sie ein AbortController-Objekt:

   • const controller = new AbortController()

2. Erhalten Sie das Signal des AbortControllers:

   • const signal = controller.signal

3. Übergeben Sie das Signal an fetch():

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

4. Anfrage abbrechen, wenn notwendig:

   • controller.abort()

Beispielverwendung

Betrachten Sie das folgende Beispiel (kompatibel mit 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();
}

In diesem Beispiel wird durch Klicken auf die Schaltfläche „Beginn“ die Anfrage initiiert, während durch Klicken auf die Schaltfläche „Abbrechen“ Mit der Schaltfläche wird der Vorgang vorzeitig beendet.

Das obige ist der detaillierte Inhalt vonWie kann ich eine „fetch()'-Anfrage während des Flugs in JavaScript abbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!