XMLHttpRequestによる通信で一定時間経過したらリクエストをキャンセルする

一定時間経過したら通信をキャンセル

XMLHttpRequestオブジェクトのtimeoutプロパティに通信する許容時間を指定すると、その時間を経過しても通信が完了しなかったときは途中でリクエスト（要求）をキャンセルして通信を終了させることができます。

timeoutプロパティにはミリ秒単位の時間を数値で指定します。
この時間を経過しても通信が完了していなかったときは通信をキャンセルして、イベントtimeoutが発生します。

以下の例では、あえて通信が正常に終了しないようにtimeoutプロパティに1ミリ秒を設定してからsendメソッドを実行して通信を開始します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

	// (1) リクエストの設定
	const xhr = new XMLHttpRequest();
	xhr.open('get', './test.mov', true);
	xhr.responseType = 'blob';
	xhr.timeout = 1;

	// (2) リクエスト送信
	xhr.send();

	// (3) リクエストのタイムアウトを検出して処理を実行
	xhr.addEventListener('timeout', () => {
		console.log("タイムアウト");
	});
});

通信を開始してからtimeoutプロパティに指定した時間が経過するとリクエスト（要求）をキャンセルして通信を終了します。
このとき発生するイベントtimeoutを検出してコンソールに「タイムアウト」と出力して通信を終了します。

タイムアウトして通信を終了した後はイベントtimeoutの後にイベントloadendが発生します。
また、readyStateプロパティの値は「0」になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。