JQuery плагин для последовательного AJAX-запросы

Question

Я не могу найти плагин для JQuery эквивалент этого кода:

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 - все ведь метод

jsfiddle.net - один по один метод

Что этот код делает:

1. Позволяет настраивать запросы ajax как один шаблон для al л.
2. Позволяет последовательно после каждого запроса ajax выполнять функцию успеха.
3. Позволяет выполнять функцию, когда все запросы выполняются, и обеспечивает доступ к массиву объектов jqXHR.

Как я вижу этот плагин:

$.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 
}); 

Полезные ссылки:

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

Answer 1

Как об этом:

example

HTML

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

Использование

$(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); 
}