- Manchmal möchte man Logs hinterlassen, wenn Benutzer zu einer anderen Seite wechseln oder ein Formular absenden
fetch in ein Klick-Event zu packen garantiert nicht, dass die Anfrage wirklich gesendet wird- Deshalb versucht man es manchmal mit
fetch und navigiert danach über window.location, aber auch das ist keine Garantie
- XHR ist asynchron und nicht blockierend
- Man kann
fetch zwar mit await auf das Promise warten lassen, aber das hat Nachteile
- Die Verarbeitung wird langsamer und verschlechtert die User Experience
- Es ist nicht so zuverlässig wie erwartet. Dinge wie das Schließen des Browser-Tabs lassen sich damit nicht abfangen
- Es gibt mehrere Optionen, mit denen man den Browser anweisen kann, die HTTP-Anfrage beizubehalten
- Verwendet man beim Fetch das
keepalive-Flag, bleibt die Anfrage auch dann erhalten, wenn die Seite beendet wird
- Eine einfachere Funktion wie
Navigator.sendBeacon()
- Browser unterstützen auch das
ping-Attribut bei a-Tags (Nachteil: nur für Links nutzbar, Firefox unterstützt es standardmäßig nicht)
- Was sollte man also verwenden?
- Wenn möglich
fetch() + keepalive
- Wird von 80 % der Browser unterstützt
- Eigene Header können gesendet werden
- Auch mit GET-Anfragen nutzbar
- Unterstützt auch ältere Browser
sendBeacon() ist gut geeignet, wenn
- Es von 96 % der Browser unterstützt wird
- Man nicht viele Anpassungsmöglichkeiten braucht
- Man eine saubere und elegante API bevorzugt
- Man nicht mit anderen Browser-Anfragen niedriger Priorität konkurrieren möchte
Noch keine Kommentare.