jQuery plugin for sequential ajax requests

Question

I can't find plugin for jQuery equivalent of this code:

function get() {
    var list = ['obj1', 'obj2', 'obj3', 'obj4', 'obj5'],
        requests = [];
    for(i = 0; i < list.length; i++) {
        requests.push($.ajaxQueue({
            type: "POST",
            url: "/echo/html/",
            data: {html: list[i]},
            success: function(data) {
                $("div").append("Call " + data + "<br>");
            }
        }));
    }
    return requests;
}

$(document).on("click", "button", function(){
    $.when.apply(null, get()).then(function(){
        $.each(arguments, function(key, val){
            $("div").append(
              "Status: " + val[2].status + ", " +
              "responseText: " + val[2].responseText + "<br>"
            );
        });
    });
});

jsfiddle.net - all after all method

jsfiddle.net - one by one method

What this code doing:

1. Allows to configure ajax requests as one template for all.
2. Allows to consistently after each ajax request execute success function.
3. Allows to execute function when all requests are done, and provides access to array of jqXHR objects.

How I see this plugin:

$.ajaxMulti({
    type: "POST",
    url: arrayOfUrls,
    data: {name: ""}
    // other ajax options
})
.oneDone(function(data){
// manipulate with data (sequence observed)
})
.allDone(function(objects){
// execute when all requests done
});

Helpful links:

• https://stackoverflow.com/a/14352218/712308
• https://stackoverflow.com/a/3035268/712308
• https://stackoverflow.com/a/16208232/712308

Answer 1

How about this:

example

HTML

<button id="btn">Send</button>

Usage

$(document).ready(function(){
    //dummy data
    var requests = {
        types: [
            'POST',
            'PUT'
        ],
        urls: [
            '/url1',
            '/url2'
        ],
        data: [{
            name: 'name1'
        },{
            name: 'name2'
        }]
    };

    var ajaxian = new Ajaxian(requests, [
        function(){console.log('success')}, 
        function(){console.log('success2')}
    ]);

    $(ajaxian).bind('allrequestcomplete', function(){
        console.log('request sequence finished');
    });

    $(ajaxian).bind('requesterror', function(){
        console.log('request sequence failed');
    });

    $('#btn').bind('click', function(){
        ajaxian.startRequests();
    });
});

Ajaxian

//Depricated method for jQuery 1.8 used, success -> done, error -> fail
function Ajaxian(requests, successHandlers){
    var self             = this;
    var me               = $(this);
    var _currentIndex    = 0;
    var _requests        = null;
    var _successHandlers = null;

    var construct = function(requests, successHandlers){
        _requests = requests;
        _successHandlers = successHandlers;
        requestHandler();
    }

    var getCurrentIndex = function(){
        //return _currentIndex++ too slow?
        var oldIndex = _currentIndex;
        _currentIndex++;
        return oldIndex;
    }

    var requestHandler = function(){
        console.log('event listener binded');
        console.log(me);

        me.bind('requestcomplete', function(data){
            //console.log(me);
            //console.log('event triggered');
            var index = getCurrentIndex();
            //console.log('step 0');
            if(_successHandlers[index - 1]){
                console.log(data);
                _successHandlers[index - 1](data);
            }           
            console.log('step 1');
            if(!_requests.urls[index]){
                me.trigger('allrequestcomplete');
                return;
            }

            prepareAndSendRequest(index);
        });

        me.bind('requestfailed', function(data){
            me.trigger('requesterror', data);
        })
    }

    var prepareAndSendRequest = function(index){
        console.log('current index: ' + index);
        var type = _requests.types[index];// ? _requests.types[index] : _requests.types[0];
        var url  = _requests.urls[index];// ? _requests.urls[index] : '';
        var data = _requests.data[index];// ? _requests.data[index] : {};            
        //console.log(type);
        //console.log(url);
        //console.log(data);
        doRequest(type, url, data);
    }

    var doRequest = function(type, url, data){        
        $.ajax({
            type: type,
            url: url,
            data: data            
        }).success(function(data){
            console.log(data);
            me.trigger('requestcomplete', data);
            //test
            //me.trigger('requestfailed', data);
        }).error(function(data){
            console.log(data);
            me.trigger('requestfailed');
            //test
            //me.trigger('requestcomplete', data);
        });
    }

    this.startRequests = function(){
        console.log('trigger');
        prepareAndSendRequest(getCurrentIndex());
    }

    construct(requests, successHandlers);
}