jQuery AJAX feuert Fehler-Callback auf Fenster unload - wie kann ich herausfiltern unload und nur echte Fehler zu fangen?

Question

Wenn ich weg von einer Seite in der Mitte eines $.ajax() Anfrage navigieren es den Fehler-Callback auslöst. Ich habe in Safari und FF sowohl mit GET- als auch mit POST-Anfragen getestet.

Eine mögliche Lösung wäre, alle AJAX-Anfragen beim Entladen der Seite abzubrechen, aber der Error-Handler wird vor dem Entladen aufgerufen, so dass dies nicht möglich scheint.

Ich möchte in der Lage sein, REAL Fehler wie 500s anmutig auf der Client-Seite mit einer höflichen Warnung oder einem modalen Dialog zu behandeln, aber ich möchte nicht, dass diese Behandlung aufgerufen werden, wenn ein Benutzer weg von der Seite navigiert.

Wie kann ich das tun?

--

(Auch seltsam: Wenn man von einer Seite weg navigiert, sagt der Error-Handler, dass der textStatus-Parameter "error" ist, derselbe, den er auswirft, wenn er eine 500/schlechte Anfrage erhält).

Answer 1

Warten Sie einfach eine Weile, bevor der Fehler angezeigt wird. Wenn eine Anfrage aufgrund des Entladens der Seite fehlschlägt, wird die Zeitüberschreitung nicht ausgelöst und der Fehler wird nicht angezeigt. Meine Experimente haben gezeigt, dass 100 ms für Desktop-Safari und Firefox (Desktop und Android) und 500 ms für iOS-Safari ausreichend sind. Die Dauern sind unscharf, also sollten Sie die Zahlen erhöhen, wenn es möglich ist.

const request = new XMLHttpRequest();

// Firefox calls onabort, Safari calls onerror
request.onabort = request.onerror = () => {
  // A short comprehensive solution
  setTimeout(() => {
    alert('The request has failed completely');
  }, 500);

  // A more gentle solution
  const isWebKit = 'ApplePayError' in window;
  const isDesktopSafari = !('standalone' in navigator);
  const isGecko = 'mozInnerScreenX' in window
  setTimeout(
    () => {
      alert('The request has failed completely');
    },
    isWebKit ? (isDesktopSafari ? 100 : 500) : (isGecko ? 100 : 0) 
  );
}

request.open('get', 'http://example.com', true);
request.send();

Ich habe diese Lösung nur in modernen Browsern überprüft (Chrome 87, Firefox 83, IE 11, Edge, Safari 14).