Chain multiple promise.all() statements

Question

I'm new to javascript and am having a hard time chaining multiple promise.all() statements. Below is a highly simplified version of my code.

function a(x) {
   return new Promise(function(resolve) { 
       setTimeout(resolve(x*2), 500)
   });
}

function b(x) {
   return new Promise(function(resolve) { 
       setTimeout(resolve(x*3), 400)
   });
}

function c(x) {
    const promises = [a(x),b(x)];
    Promise.all(promises).then(function(y){
        z = y[0] + y[1]
        return new Promise(function(resolve, reject){
            resolve(z);
        });
    }); 
}

function d(x) {
    const promises = [];
    for (let input of x){
        promises.push(c(input))
    }
    Promise.all(promises).then(function(z){
        console.log(z);
    });
}

const data = [1,2,3,4,5];
d(data);

I'd like to see this printed:

[5, 10, 15, 20, 25]

But instead I'm seeing this:

[undefined, undefined, undefined, undefined, undefined]

What am I missing?

@PatrickEvans What do you mean? Isn't it returning a promise? — user554481, Sep 05 '18 at 04:20
Hey User. Well asked question - just note that you can embed javascript/html/css straight into your quesiton - which makes it much easier to answer! — dwjohnston, Sep 05 '18 at 04:21
it is returning something in the callback but that doesn't do a return in the parent c function — Patrick Evans, Sep 05 '18 at 04:21

score 6 · Accepted Answer · answered Sep 05 '18 at 04:20

The c function isn't returning anything at the moment, resulting in undefined. Instead, return the Promise.all call, and after the Promise.all resolves, return y[0] + y[1] in the .then so that the consumer of c (in d) has access to the resolved value.

Also, avoid the explicit Promise construction antipattern - if you already have a Promise to work with, there should be no need to call new Promise to construct a separate one. Instead, just call .then on the existing Promise.

function c(x) {
    const promises = [a(x),b(x)];
    return Promise.all(promises).then(function(y){
        return y[0] + y[1]
    }); 
}

function a(x) {
   return new Promise(function(resolve) { 
       setTimeout(resolve(x*2), 500)
   });
}

function b(x) {
   return new Promise(function(resolve) { 
       setTimeout(resolve(x*3), 400)
   });
}

function c(x) {
    const promises = [a(x),b(x)];
    return Promise.all(promises).then(function(y){
        return y[0] + y[1]
    }); 
}

function d(x) {
    const promises = [];
    for (let input of x){
        promises.push(c(input))
    }
    Promise.all(promises).then(function(z){
        console.log(z);
    });
}

const data = [1,2,3,4,5];
d(data);

score 2 · Answer 2 · answered Sep 05 '18 at 04:21

The issue with your code was that you were not returning the promises from your functions c(x) and d(x).

function a(x) {
    return new Promise(function(resolve) {
        setTimeout(resolve(x * 2), 500)
    })
}

function b(x) {
    return new Promise(function(resolve) {
        setTimeout(resolve(x * 3), 400)
    })
}

function c(x) {
    const promises = [a(x), b(x)]
    return Promise.all(promises).then(function(y) {
        z = y[0] + y[1]
        return new Promise(function(resolve, reject) {
            resolve(z)
        })
    })
}

function d(x) {
    const promises = []
    for (let input of x) {
        promises.push(c(input))
    }
    return Promise.all(promises)
}

const data = [1, 2, 3, 4, 5]
d(data) // then [ 5, 10, 15, 20, 25 ]

Chain multiple promise.all() statements

2 Answers2