jQueryで非同期かつ複数同時並列にリクエストするには

本章では、jQueryで非同期かつ複数同時並列でサーバーにリクエストする方法について共有します。

jQueryのモジュール

jQueryには、「Deferred」と呼ばれるモジュールがあります。これは、非同期処理が終わった後に、別の処理を実行させるために用います。利点としては、非同期処理が複数あり、前の処理を待って処理を始める際に、プログラムがネスト地獄にならない利点があります。

非同期・複数・並列

非同期・複数・並列で非同期通信する場合には、「$.when.apply」を利用します。予めリクエストするURLと送信データを準備しておき、一度のコールで同時にリクエストします。
イメージ図を以下に用意しました。

縦軸：tが時間を表しています。jqXHRListでリクエストURLを複数用意し、非同期通信を始め、完了時にデータをすべて受け取ります。それぞれの処理にかかる時間が違う場合でも、「done」での処理はすべての処理(図ではGetItemとGetUser)が完了してから行われます。

スクリプト

「$.when.apply」の使用例を以下に示します。

// 2つのリクエストURL(必要であればデータも)を用意します
var request = [
    { url: "/User/GetUser" },
    { url: "/Item/GetItem" },
];
var jqXHRList = [];
// Ajaxのリクエスト処理を作成します
for (var i = 0; i < request.length; i++) {
    jqXHRList.push($.ajax({
        type: "POST",
        contentType: "application/json",
        url: request[i].url,
    }));
}
// 非同期処理を実行します
$.when.apply($, jqXHRList).done(function () {
    // 1つ目のURLの処理の結果を受け取ります
    var userId = arguments[0][0];
    // 2つ目のURLの処理の結果を受け取ります
    var itemId = arguments[1][0];
}).fail(function (ex) {
    // サーバー側での処理に失敗した際に、呼び出されます
    alert("Ajax通信に失敗しました");
});

なおリクエスト完了時のデータ受領方法は、「arguments[index][0]」となります。※indexは、URLのリクエスト順で決まります。

総括

jQueryでは、様々なモジュールが用意されています。今回は、非同期通信で非常に役立つモジュールについて紹介しました。一度に複数リクエストする場面は、数多くあると思います。是非利用してみてください。

以上、「jQueryで非同期かつ複数同時並列にリクエストするには」でした。