Какой шаблон проектирования следует применять при проверке выполнения нескольких запросов ajax?

Question

У меня 3 вызова ajax в одной функции и checkAjaxCompletion, который проверяет каждый флаг завершения ajax.

Код, приведенный ниже, отправляет несколько отдельных вызовов ajax, а интервальный метод проверяет флаги завершения, чтобы определить, следует ли продолжить или сохранить интервал. (Я знаю, что clearInterval не отображается, но дело в том, что я хочу использовать что-то, кроме интервала)

Текущий код:

function manyAjax() {

   setInterval( function() { checkAjaxCompletion(); } , 200);

   ajax1(); 

   ajax2();

   ajax3();

}

function ajax1() {
   //send ajax request to server and if success set flag to 1. Default is 0. Error is 2.
}

function ajax2() {
   //send ajax request to server and if success set flag to 1. Default is 0. Error is 2.
}

function ajax3() {
   //send ajax request to server and if success set flag to 1. Default is 0. Error is 2.
}

function checkAjaxCompletion() {

   if(ajax1_flag == 1 && ajax2_flag == 1 && ajax3_flag == 1) {
       //everything went success, do some process
   }
   else if(ajax1_flag == 2 || ajax2_flag == 2 || ajax3_flag == 2) {
       //some ajax failed, do some process
   }
   else {
      //all ajax have not been completed so keep interval i.e. do nothing here
   }
}

Но я стесняюсь зависеть от использования интервальной функции, потому что ее вызов так часто кажется такой пустой тратой памяти. Там должен быть лучший способ сделать. Я думаю, если observer pattern можно применить здесь, но хотел бы услышать мнения.

Answer 1

Это является наблюдателем-уведомителем, если вы хотите так его называть, - но каждый из ваших вызовов ajax, скорее всего, будет иметь обратный вызов в javascript, когда они завершатся. Почему бы не позвонить checkAjaxCompletion() в конце каждого из них и ничего не делать, если вы все еще ждете других?

Answer 2

Хорошо, моя идея состояла в том, чтобы создать свой собственный объект, который мог бы обрабатывать отправку массива запросов, вести историю каждого запроса и делать то, что я буду называть «postProccessing» для каждого ответа, вот, вероятно, очень хитрая часть код, который, я надеюсь, продемонстрирует, о чем я думаю.

var Ajax = function() {
    var request, callback, lst;

    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }

    request.onreadystatechange = handleResponse;

    this.history = [{}];

    this.send = function(args) {
        for (var i = 0; i < args.length; i++) {
            if (args.url) {
                request.open(args.type || 'GET', args.url);
            }
            request.send(args.data || null);
            callback = args.callback;
            lst++;
        }
    }

    function handleResponse() {
        var response = {
            url: '',
            success: true,
            data: 'blah'
        };
        history.push(response);
        if (postProccess()) {
            callback();
        }

    }

    function postProcess() {
        if (this.history[lst].success) {
            return true;
        } else {
            return false;
        }
    }
}

Answer 3

// ajax callback
            this.ajaxCallback = function(){                          
                $.ajax({            
                        type: "POST",
                        url: ajax.url,
                        data: {key: value},
                        async   : !isAll,// false使用同步方式执行AJAX，true使用异步方式执行ajax
                        dataType: "json",
                        success: function(data){
                            if(data.status == 'successful'){                                
                                selfVal.parent().find('.msg').addClass('ok').html(msg.ok);
                            }else if(data.status == 'failed'){
                                checkRet = false;
                                selfVal.parent().find('.msg').removeClass('ok').html(msg.error);
                            }else{
                                checkRet = false;
                            }
                            return this;
                     }
                });                 
            }               
            return this;

Может быть, вы хотите проверить свой входной ответный вызов ajax в вашей форме; Вы можете просмотреть мой сайт Демо, надеюсь, поможет вам. http://6yang.net/myjavascriptlib/regForm

Answer 4

Дастин Диаз отлично справляется с этим примером .

function Observer() {
  this.fns = [];
}

Observer.prototype = {
  subscribe : function(fn) {
    this.fns.push(fn);
  },

  unsubscribe : function(fn) {
    this.fns = this.fns.filter(
      function(el) {
        if ( el !== fn ) {
          return el;
        }
      }
    );
  },

  fire : function(o, thisObj) {
    var scope = thisObj || window;
    this.fns.forEach(
      function(el) {
        el.call(scope, o);
      }
    );
  }
};

Издатель:

var o = new Observer;
o.fire('here is my data');

Подписчик:

var fn = function() {
  // my callback stuff
};

o.subscribe(fn);

Отписаться:

var fn = function() {
  // my callback stuff
};

o.subscribe(fn);