同期・非同期リクエスト

12月 22, 2021
admin

多くの外部ファイルを読み込まなければならない場合がある。 読み込んだファイルの内容を指定したリスナーに切り替えるために、XMLHttpRequestオブジェクトを非同期で使用する標準的な関数です。

function xhrSuccess() { this.callback.apply(this, this.arguments);}function xhrError() { console.error(this.statusText);}function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) { var xhr = new XMLHttpRequest(); xhr.callback = callback; xhr.arguments = Array.prototype.slice.call(arguments, 2); xhr.onload = xhrSuccess; xhr.onerror = xhrError; xhr.open("GET", url, true); xhr.send(null);}

使用法:

function showMessage(message) { console.log(message + this.responseText);}loadFile("message.txt", showMessage, "New message!\n\n");

ユーティリティ関数 loadFile の署名では、(i)(HTTP GET 要求による)読み取り対象 URL、(ii)XHR 操作の成功時に実行する関数、(iii)XHR オブジェクトを介して(argumentsプロパティ経由で)成功コールバック関数に渡される追加の引数の任意のリストが宣言されています。

行目では、XHR 操作が正常に完了したときに呼び出される関数を宣言しています。 それは、次に、XHR オブジェクトのプロパティに割り当てられている loadFile 関数 (この場合、関数 showMessage) の呼び出しで指定されたコールバック関数を呼び出します (11行目)。

行 5 は XHR 操作が正常に完了しなかったときに呼び出される関数を宣言しています。

行 11 は loadFile への第 2 引数として与えられた成功コールバックを XHR オブジェクトの callback プロパティに格納しています。

行 12 は loadFile の呼び出しに与えられた引数の配列をスライスしています。 3番目の引数から始まり、残りのすべての引数が収集され、変数 xhr の引数プロパティに割り当てられ、成功コールバック関数 xhrSuccess に渡され、最終的に関数 xhrSuccess によって呼び出されるコールバック関数(この場合、showMessage)に供給されます。

ライン 15 では、リクエストが非同期に処理されるべきことを示すため、その3番目のパラメータとして True を指定します。

コメントを残す

メールアドレスが公開されることはありません。