在数组中为jQuery Promise添加Ajax会导致意外行为

Question

I have an each statement which make separate AJAX requests and adds them to an array like:

var promises = [];

$items.each(function(k, v) {
   promises.push(
      $.ajax({
         url: ...,
         .... 
      }) 
   );
});


$.when.apply($, promises).done(function() { ... });

It seems that, I don't know the reason, for the first time when loading the page, or when it is deployed (I use ASP.NET MVC), the ajax is already executed for the first item when it reaches this breakpoint:

promises.push($.ajax ...

If I refresh the page, then everything works fine, and $.when correctly executes the ajax requests. However, if I deploy application, then the problem persists.

Why, for the first time, is the ajax request already called (not in $,.when )? Where is my mistake? I have no errors in JavaScript.

Answer 1

If the code isn't any more complex than the example, you can do something like this

var get_promises = function() {
    var promises = [];
    return function () {
        if (promises.length === 0) {
            $items.each(function(k, v) {
               promises.push(
                  $.ajax({
                     url: ...,
                     .... 
                  }) 
               );
            });
        }
        return promises;
    }
}());
$.when.apply($, get_promises()).done(function() { ... });

I can't believe I suggested the following!! But I'm going to own it :D

One way to do what you want is with so called "lazy" promises

a Promise/A+ polyfill - for Internet Explorer mainly (up to and including 11 - Edge, or whatever it's called in Windows 10, has native Promise)

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>

A lazy promise implementation, based on - https://github.com/then/lazy-promise - but modified to work with browser native promises - note, only tested in firefox, YMMV

var inherits = (function() {
    if (typeof Object.create === 'function') {
        return function inherits(ctor, superCtor) {
            ctor.super_ = superCtor
            ctor.prototype = Object.create(superCtor.prototype, {
                constructor: {
                    value: ctor,
                    enumerable: false,
                    writable: true,
                    configurable: true
                }
            });
        };
    } else {
        return function inherits(ctor, superCtor) {
            ctor.super_ = superCtor;
            var TempCtor = function () {};
            TempCtor.prototype = superCtor.prototype;
            ctor.prototype = new TempCtor();
            ctor.prototype.constructor = ctor;
        };
    }
}());

inherits(LazyPromise, Promise);

function LazyPromise(fn) { 
    var promise;
    if (!(this instanceof LazyPromise)) {
        return new LazyPromise(fn);
    }
    if (typeof fn != 'function') {
        throw new TypeError('fn is not a function');
    }

    this.then = function(onResolved, onRejected) {
        return (promise = promise || new Promise(function(resolve, reject) {
            setTimeout(function() {
                try { fn(resolve, reject) }
                catch (e) { reject(e) }
            }, 0);
        })).then(onResolved, onRejected);
    };
}

Now to changes in your code - very minimal

var promises = [];

$items.each(function(k, v) {
   promises.push(
      new LazyPromise(function(resolve, reject) { // wrap the (broken) jQuery "promise" in a Lazy Promise
          $.ajax({
             url: ...,
             .... 
          })
          .then(resolve, reject); // I assume $.ajax is "thenable", so resolve the wrapping Lazy promise;
      }) // end of Lazy Promise wrapper
   );
});

$.when.apply($, promises).done(function() { ... });

This is probably overkill, but it should do exactly what you requested in your question