jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばAという処理のBという処理を行う場合は何も考えずに書くとAのajax処理成功後にネストして書くことになる。さらにCという処理を追加するとなると非常に見づらいコードになる。また、AとBとCを同時にajax通信を行った場合にどの処理が最初に返ってくるか分からないといったケースもある。そういった場合の対処法をメモ。

ajax通信を受けて日時を返すページ(ajax.php)

sleep(rand(1,5)); //ランダムで1秒から5秒停止
echo date('H:i:s');

何も考えずに書いたパターン

var cnt = [0,1,2];

$.each(cnt, function(key, val) {
    $.ajax({
        url: 'ajax.php',
        type:'POST',
    }).done(function(data) {
        $('#result').append('<div>' + data + '</div>');
    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
        alert("error");
    })
});

結果が出たらappendしていく形。ダメとかではないけど今回は一括で結果を表示させたい。

まとめて処理するパターン

var cnt = [0,1,2];

var ajaxtest = function(opt){
    var $ajax = $.ajax(opt);
    var defer = new $.Deferred();
    $ajax.done(function(data, status, $ajax){
        defer.resolveWith(this, arguments);
    });
    $ajax.fail(function(data, status, $ajax){
        defer.resolveWith(this, arguments);
    });
    return $.extend({}, $ajax, defer.promise());
};


var ajax_list = [];
var data_array = [];
var html = '';
$.each(cnt, function(key, val) {
    var $ajax = ajaxtest({url : 'ajax.php', type:'POST'}).done(function(res, status){
        if( status === "success" ){
            data_array[data_array.length] = '<div>'+ res +'</div>';
        }else{
            console.log('error');
        }
    });
    ajax_list.push( $ajax );
});
$.when.apply(null, ajax_list).done(function(){
    $.each(data_array, function(key, val) {
        html += val;
    });

    $('#result').html(html);
});
$.when.apply(null, ajax_list).fail(function(){
    console.log('error');
});

全ての結果が出てからまとめて表示させる。今回は結果を表示するだけなのでdata_arrayのように配列にする必要はないけど、結果を受け取ってjavascript側で何らかの処理をする場合は配列の方が便利。

参考サイト

https://www.psi-net.co.jp/blog/?p=1125

https://qiita.com/YusukeHirao/items/bca14c5f2fe4026fd4d7