How to create nested promises in javascript?

Question

I am using plain javascript. I have 3 tasks to do for each element of an array. I have created promises for each element, where each one promises to do the tasks for each element. Now inside each one, I want to make 3 promises, one for each task.

processElement=processArrayElementFunction(matrix);
unique.forEach(function (number,index)
{
  promises.push(new promiseToProcessElement(index,number,processElement,matrix));
});

Promise.all(promises).then((results) => {console.log(results);});


function promiseToProcessElement(id,num,callbackProcessElement,matrix)
{
  return new Promise((resolve, reject) => {
     resolve(callbackProcessElement(id, num,matrix););
 });
}

function processArrayElementFunction(matrix)
{
   return function(index, number)
   {
      var promises=[];
      promises.push(new promiseTask(index,sumRC,matrix));
      promises.push(new promiseTask(index,sumAround,matrix));
      promises.push(new promiseTask(number,repetitions,matrix));

      Promise.all(promises).then((results) => {
         return results;
       });
     };
  }

function promiseToProcessElement(id,num,callbackProcessElement,matrix)
{
   return new Promise((resolve, reject) => {
      resolve(callbackProcessElement(id, num,matrix););
  });
}

function promiseTask(num,callbackTask,matrix)
{
   return new Promise((resolve,reject)=>
   {
      resolve(callbackTask(num,matrix));
   });
}

sumRC,sumAround,repetitions are just some functions that do the tasks. They are not important.

Now the var result=callbackProcessElement(id, num,matrix); in the function promiseToProcessElement is undefined. I think the problem is, because, the program demands this result, without the completion of the 3 tasks for each element. Is this true? And how can i Fix it?

Do you mind stripping your code down? It's hard to read and has some missing braces. — Cookie, Jul 24 '17 at 08:13
I suggest you read more carefully about promises... All your promises call resolve synchronously... You could remove them all and it'd do the same thing. You need to use then and return the promises so you can chain. — Salketer, Jul 24 '17 at 08:15

Salketer · Accepted Answer · 2017-07-24T08:53:24.177

Your problem stands in those two functions, I've added comments to mark them:

function promiseToProcessElement(id,num,callbackProcessElement,matrix)
{
return new Promise((resolve, reject) => {
  var result=callbackProcessElement(id, num,matrix);
  resolve(result);//You resolve the promise without waiting.
 });
}

function processArrayElementFunction(matrix)
{


return function(index, number)
   {
      var promises=[];
      promises.push(new promiseTask(index,sumRC,matrix));
      promises.push(new promiseTask(index,sumAround,matrix));
      promises.push(new promiseTask(number,repetitions,matrix));
// You do not return anything.
      Promise.all(promises).then((results) => {
         return {Elementi: index+1,ShumaRreshtKolone:results[0],ShumaNrRrethues:results[1],sumAround:results[2]};
      }
   ).catch(function (error){console.log(..);});

   };

}

You are creating too many promises for nothing... You can keep them, or simplify, it is up to you, but here's how I'd fix it.

function promiseToProcessElement(id,num,callbackProcessElement,matrix)
{
//Do not create another promise, just return the one that is created for the tasks.
return callbackProcessElement(id, num,matrix);
}

function processArrayElementFunction(matrix)
{


return function(index, number)
   {
      var promises=[];
      promises.push(new promiseTask(index,sumRC,matrix));
      promises.push(new promiseTask(index,sumAround,matrix));
      promises.push(new promiseTask(number,repetitions,matrix));
// Return the promise so we can chain.
      return Promise.all(promises).then((results) => {
         return {Elementi: index+1,ShumaRreshtKolone:results[0],ShumaNrRrethues:results[1],sumAround:results[2]};
      }
   ).catch(function (error){console.log(..);});

   };

}

I THINK that this will work, but it is hard to tell as your code is not stripped down to the minimum and it seems to over complicate your task.

Here is what I think it should look like.

unique.forEach(function (number,index)
{
  promises.push(doTask(number,matrix));

Promise.all(promises).then((results) => {console.log(results);}
).catch(function (error){...);});

function doTask(number,matrix){
    let proms = [];
    proms.push(new Promise(function(done){
       sumRC(number,matrix,done);
    }));
    proms.push(new Promise(function(done){
       sumAround(number,matrix,done);
    }));
    proms.push(new Promise(function(done){
       repetitions(number,matrix,done);
    }));

    return Promise.all(proms).then(function(results){
        return {Elementi: index+1,ShumaRreshtKolone:results[0],ShumaNrRrethues:results[1],sumAround:results[2]};
    });
}

//Example of how sumRC should look
function sumRC(number,matrix,done){
    //DO SUM or whatever
    var result = number+1;
    done(result);
}

The main problem is that you are using promises without any good reason in the code you have provided, so I have assumed that sumRC was an asynchronous function that has a callback at the end for it to mean something.

Actually, it is not as simple as that... Re-reading your code it seems that you are misusing all your function return values. — Salketer, Jul 24 '17 at 08:14
First reduce your code to the minimum... There is 3 functions that just return something without doing anything. You can totally get rid of them. — Salketer, Jul 24 '17 at 08:23
can you help me? Except processArrayElementFunction, i dont see, what i should? — kkica, Jul 24 '17 at 08:32
Your solution shows this `Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: Object ` — kkica, Jul 24 '17 at 08:33
Here, i've put a version of your code that I think should be enough. But I have done it with making multiple assumptions. — Salketer, Jul 24 '17 at 08:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149969/discussion-between-kristjan-kica-and-salketer). — kkica, Jul 24 '17 at 09:05

score 0 · Answer 2 · answered Jul 24 '17 at 08:13

Make sure that processArrayElementFunction returns the Promise.all

function processArrayElementFunction(matrix)
{
  return function(index, number)
  {
    var promises=[];
    promises.push(new promiseTask(index,sumRC,matrix));
    promises.push(new promiseTask(index,sumAround,matrix));
    promises.push(new promiseTask(number,repetitions,matrix));

    RETURN Promise.all(promises).then((results) => {
     return {Elementi: index+1,ShumaRreshtKolone:results[0],ShumaNrRrethues:results[1],sumAround:results[2]};
     }
    ).catch(function (error)
    {
      console.log(..);});
    };
}

It says this: `Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}__proto__: Promise[[PromiseStatus]]: "resolved"[[PromiseValue]]: Object ` but it yields a result in the end. — kkica, Jul 24 '17 at 08:22

How to create nested promises in javascript?

2 Answers2