XMLHttpRequestEventTarget: error Event
Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.
Das error Ereignis wird ausgelöst, wenn die Anfrage auf einen Fehler gestoßen ist.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("error", (event) => { })
onerror = (event) => { }
Ereignistyp
Ein ProgressEvent. Erbt von Event.
Ereigniseigenschaften
Neben den unten aufgeführten Eigenschaften sind die Eigenschaften der Elternschnittstelle, Event, verfügbar.
lengthComputableSchreibgeschützt-
Ein boolesches Flag, das anzeigt, ob die gesamte zu leistende Arbeit und die bereits geleistete Arbeit des zugrunde liegenden Prozesses berechenbar ist. Mit anderen Worten, es zeigt an, ob der Fortschritt messbar ist oder nicht.
loadedSchreibgeschützt-
Ein 64-Bit unsigned Integer-Wert, der die Menge der bereits vom zugrunde liegenden Prozess geleisteten Arbeit angibt. Der Anteil der geleisteten Arbeit kann berechnet werden, indem der Wert dieser Eigenschaft durch
totalgeteilt wird. Beim Herunterladen einer Ressource mit HTTP zählt dies nur den Hauptteil der HTTP-Nachricht und schließt Header und andere Overheads nicht mit ein. totalSchreibgeschützt-
Ein 64-Bit unsigned Integer, der die Gesamtmenge der Arbeit darstellt, die der zugrunde liegende Prozess gerade leistet. Beim Herunterladen einer Ressource mit HTTP ist dies die
Content-Length(die Größe des Hauptteils der Nachricht) und schließt die Header und andere Overheads nicht mit ein.
Beispiele
Verwendung mit XMLHttpRequest
HTML
<div class="controls">
<input
class="xhr success"
type="button"
name="xhr"
value="Click to start XHR (success)" />
<input
class="xhr error"
type="button"
name="xhr"
value="Click to start XHR (error)" />
<input
class="xhr abort"
type="button"
name="xhr"
value="Click to start XHR (abort)" />
</div>
<textarea readonly class="event-log"></textarea>
JavaScript
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");
function handleEvent(e) {
log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}
function addListeners(xhr) {
xhr.addEventListener("loadstart", handleEvent);
xhr.addEventListener("load", handleEvent);
xhr.addEventListener("loadend", handleEvent);
xhr.addEventListener("progress", handleEvent);
xhr.addEventListener("error", handleEvent);
xhr.addEventListener("abort", handleEvent);
}
function runXHR(url) {
log.textContent = "";
const xhr = new XMLHttpRequest();
addListeners(xhr);
xhr.open("GET", url);
xhr.send();
return xhr;
}
xhrButtonSuccess.addEventListener("click", () => {
runXHR("example-image.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://example.com/notfound.jpg");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("example-image.jpg").abort();
});
Ergebnis
Verwendung mit XMLHttpRequestUpload
Sie können das error Ereignis verwenden, um ein Problem beim Upload zu erkennen. Für ein vollständiges Codebeispiel, das eine Datei hochlädt und einen Fortschrittsbalken anzeigt, siehe die Hauptseite von XMLHttpRequestUpload.
// In case of an error we hide the progress bar
// Note that this event can be listened to on the xhr object too
function errorAction(event) {
progressBar.classList.remove("visible");
log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("error", errorAction);
Spezifikationen
| Specification |
|---|
| XMLHttpRequest # event-xhr-error |
| XMLHttpRequest # handler-xhr-onerror |
Browser-Kompatibilität
api.XMLHttpRequest.error_event
Loading…
api.XMLHttpRequestUpload.error_event
Loading…