Getting data from multiple sources with promises

Question

I'm trying to get the data from one or multiple sources, so I pass in an array of urls to get the data from and make a promise.

Then I try to use Promise.all in order to get all the data, but I don't get anything at all.

How can I solve this?

var getData = function (urls) {

    var promises = [];
    $.each(urls, function (index, url) {
       var promise = new Promise(function (resolve, reject) {
           $.ajax({
               type: 'get',
               url: url,
               dataType: 'json',
               success: function (data) {
                   console.log(data);
               }
           });
       });

        promises.push(promise);
    });

    console.log(promises);

    Promise.all(promises).then(function () {
        console.log('Complete');
    });

};

`promise.push($.ajax({ ... }));` - $.ajax returns a promise, use that — Jaromanda X, Sep 19 '16 at 09:49
what is the problem, if you're not getting any data at all, it's nothing to do with the Promise or the Promise.all - are you saying you get nothing in the console? — Jaromanda X, Sep 19 '16 at 09:53
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Sep 19 '16 at 10:10

score 3 · Accepted Answer · answered Sep 19 '16 at 09:53

You can do by using push response under array and use it on done()

var xhr_request=[];
var responses=[];
$.each(urls, function (index, url) {
    // you can push  any aysnc method handler
    xhr_request.push($.ajax({
        url: url,
        type:'get', 
        dataType:'json', 
        data:{user_name: users[i]},
        success: function(data){
            console.log('success of ajax response')
            responses.push(data);
        }
    }));
});


$.when.apply(null, xhr_request).done( function(){
    // all done
    console.log('all request completed')
    console.log(responses);
});

Here $.when provides a way to execute callback functions based on zero or more objects, usually Deferred objects that represent asynchronous events.

$.apply converts array elements as different arguments in function

$.done is call function after all async. request are completed.

score 2 · Answer 2 · answered Sep 19 '16 at 09:59

This is the way I would write that code (sort of, as I don't usually use jQuery, I'm lying a bit)

var getData = function (urls) {
    Promise.all($.map(urls, function (index, url) {
       return $.ajax({
           type: 'get',
           url: url,
           dataType: 'json'
       });
    })).then(function (responses) {
        console.log('Complete');
        console.log(responses); // responses in an array
    });
};

$.ajax returns a promise, no need to wrap it in a Promise constructor

use $.map instead of $.each and return the jquery promise - that allows you to wrap that whole $.map as the Promise.all argument

What I don't get is why you say you don't get "anything at all" - even though your code was not quite right, it should've still kicked off the $.ajax's and given you console output

nikjohn · Answer 3 · 2016-09-19T10:13:18.597

Instead of

var promise = new Promise(function (resolve, reject) {
       $.ajax({
           type: 'get',
           url: url,
           dataType: 'json',
           success: function (data) {
               console.log(data);
           }
       });
   });

Why don't you just

var promise = 
       $.ajax({
           type: 'get',
           url: url,
           dataType: 'json',
           success: function (data) {
               console.log(data);
           }
       });

You're already returning a promise through your $.ajax. So you don't need to wrap it within another Promise.

Getting data from multiple sources with promises

3 Answers3