Ember.RSVP.all seems to resolve immediately

Question

I'm really hoping that there's something dumb that I'm doing, but I can't seem to find it.

I'm trying to use Ember.RSVP.all in the middle of a chain of promises. The example I have is much simpler than my use, but it demonstrates the issue. In the middle of a chain of promises, I have a set of promises that all need to resolve before the chain can continue - exactly what I understand RSVP.all to be for.

Unfortunately, when I return the RSVP.all object, the next promise in the chain runs immediately, without waiting for the promises passed to all().

I've set up a js fiddle to demonstrate in the best way that I can think of: http://jsfiddle.net/3a9arbht/3/

Notice that First and Second both resolve at almost exactly the same time, when Second should be after the 1s promise comes back. Third and fourth follow as expected.

Fiddle code looks like this:

function delayAjax(delay) {
    return Ember.$.ajax({
        url: '/echo/json/',
        data: {
            json: '',
            delay: delay,
        }
    });
}

delayAjax(1).then(function() {
    Ember.$('#first').addClass('red');
    var proms = [delayAjax(1), delayAjax(1)];
    return Ember.RSVP.all(proms)
}).then(function() {
    Ember.$('#second').addClass('red');
    return delayAjax(1);
}).then(function() {
    Ember.$('#third').addClass('red');
    return delayAjax(1);
}).then(function() {
    Ember.$('#fourth').addClass('red');
});

Answer 1

Answering based on a response to another question. It appears that while the $.ajax response is indeed "thenable", it is a jQuery deferred object, not a Promise. It's not clear to me why they don't play well together, but the solution is simply to convert the ajax call to a promise:

function delayAjax(delay) {
    return Promise.resolve($.ajax({
        url: '/echo/json/',
        data: {
            json: '',
            delay: delay,
        }
    }));
}

With a working fiddle: http://jsfiddle.net/evilbuck/vqut9zy2/3/