JavaScript

レシピ

Ajax

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

XMLHttpRequestによる通信を開始してから一定時間が経過しても通信が完了したいときにリクエスト(要求)を途中で取り消す方法について解説します。

この記事のポイント

  • Ajaxの通信時間の上限はtimeoutプロパティにミリ秒単位で指定する
  • timeoutプロパティに指定した時間が経過しても通信完了しないときはタイムアウトで通信キャンセルする

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

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」になります。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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