XMLHttpRequestEventTarget: error イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
error イベントは、リクエストでエラーが発生したときに発行されます。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("error", (event) => { })
onerror = (event) => { }
イベント型
ProgressEvent です。 Event から継承しています。
イベントプロパティ
下記のプロパティに加え、親インターフェイスである Event のプロパティを利用できます。
lengthComputable読取専用-
論理値のフラグで、このプロセスで行われる作業の合計と、すでに行われた作業の量が計算可能かどうかを示します。言い換えれば、進捗が計測可能かどうかを示します。
loaded読取専用-
64 ビット符号なし整数値で、このプロセスで既に作業を行った量を示します。作業した比率は、
totalをこのプロパティの値で割ることで算出できます。 HTTP を使用してリソースをダウンロードする場合、これは HTTP メッセージの本文のみをカウントし、ヘッダーやその他のオーバーヘッドは含まれません。 total読取専用-
64 ビット符号なし整数で、基礎となるプロセスが実行中の作業の総量を表します。 HTTP を使用してリソースをダウンロードする場合、これは
Content-Length（メッセージの本文のサイズ）であり、ヘッダーやその他のオーバーヘッドは含まれません。
例
ライブデモ
HTML
<div class="controls">
<input
class="xhr success"
type="button"
name="xhr"
value="クリックで XHR 開始（成功）" />
<input
class="xhr error"
type="button"
name="xhr"
value="クリックで XHR 開始（エラー）" />
<input
class="xhr abort"
type="button"
name="xhr"
value="クリックで XHR 開始（中止）" />
</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("/shared-assets/images/examples/balloon.jpg");
});
xhrButtonError.addEventListener("click", () => {
runXHR("https://example.com/some-path");
});
xhrButtonAbort.addEventListener("click", () => {
runXHR("/shared-assets/images/examples/balloon.jpg").abort();
});
結果
XMLHttpRequestUpload の使い方
error イベントを使用して、アップロードに問題を検出するすることができます。ファイルをアップロードして進捗バーを表示する完全なサンプルコードについては、メインの XMLHttpRequestUpload ページを参照してください。
// 中止時には進捗バーを非表示にする
// なお、このイベントは xhr オブジェクトでもリスナーを登録することができる
function errorAction(event) {
progressBar.classList.remove("visible");
log.textContent = `Upload failed: ${event.type}`;
}
xhr.upload.addEventListener("abort", errorAction);
仕様書
| Specification |
|---|
| XMLHttpRequest # event-xhr-error |
| XMLHttpRequest # handler-xhr-onerror |