Generate an array of promises to run sequentially

Question

I'm trying to generate an array of Promises to run sequentially. I've seen lots of tips on this but can't get it to run in my use case.

export default function generateIcons(){
  return new Promise((resolve, reject) => {
    const containers = document.querySelectorAll('.html2CanvasTarget')
    const promises = containers.map(child => processIcon(child))
    promises.reduce((p, fn) => p.then(fn), Promise.resolve())
    resolve()
  })
}

function processIcon(child){
  return new Promise((resolve, reject) => html2canvas(child).
 then(canvas => uploadFromCanvas(canvas,
  child.childNodes[0].className.split(' ')[1] + '.png'))
 .then(resolve).catch(reject))
}

Any tips? This just rejects and I can't see why

score 2 · Answer 1 · answered Aug 05 '19 at 06:44

2

Looks like you want to resolve the main promise when the canvases are available for all the child elements. You can use Promise.All() for this.

It should also be noted that the querySelectorAll doesn't return anything you can call the .map on. You will have to create an array from what the querySelectorAll returns - which is a NodeList.

export default function generateIcons(){
  return new Promise((resolve, reject) => {

    const containers = document.querySelectorAll('.html2CanvasTarget');
    const promises = Array.from(containers).map(child => processIcon(child))

    Promises.All(promises).then(() => resolve());
  })
}

answered Aug 05 '19 at 06:44

Charlie

22,886
11
59
90

You also need to add `.catch()` to handle any promise rejection. – Neel Rathod Aug 05 '19 at 07:17
For best practice, you need to handle it globally by adding a hook in your main file (`sever.Js`). process.on('unhandledRejection', (reason, promise) => { console.log('Reason', reason); console.log('promise', promise); // Send mail if you want to notify }); ` – Neel Rathod Aug 05 '19 at 07:19

CertainPerformance · Accepted Answer · 2019-08-05T08:04:21.667

containers is a NodeList, and NodeLists don't have a .map method, which is why your code is throwing an error.

Because processIcon already returns a Promise, there's no need to use the Promise constructor again. html2canvas already returns a Promise too, so there's no need for any Promise constructor anywhere (see What is the explicit promise construction antipattern and how do I avoid it?)

If possible, just await each call of it in a for loop. Because uploadFromCanvas returns a Promise too, and you want to wait for it, return it (or await it) as well:

export default async function generateIcons() {
  const containers = document.querySelectorAll('.html2CanvasTarget');
  for (const container of containers) {
    await processIcon(container);
  }
}

function processIcon(child) {
  return html2canvas(child, {backgroundColor:null})
    .then(canvas => uploadFromCanvas(canvas, child.className.split(' ')[1] + '.png'))
    .catch(console.log);        
}

Neel Rathod · Answer 3 · 2019-08-05T07:16:51.937

As per your question, you can use Q module module for that

You need to take an empty array and push promises into it, and just pass this array in Q method (Q.allSettled), Take a look with an example

const Q = require('q');

const promiseHolder = [];

for (let i = 0; i < 10; i += 1) {
  promiseHolder.push('Your Promises');
}

Q.allSettled(promises)
  .then((results) => {
    results.forEach((result) => {
      if (result.state === 'fulfilled') {
        const value = result.value;
        return value;
      } 
        const reason = result.reason;
        throw reason;      
    });
  });

In Q.allSettled() The method you always get the result in .then(). There are 2 states. One for success and one for failure.

Success => state === 'fulfilled', value: 'Whatever your promise return'

Failure => state === 'rejected', reason: 'Whatever your promise thrown'

In this case, you have a number of successful and unsuccessful promises.

There is the second approach which is Promise.all() do the same but the issue is whenever any of promise rejected further promise never called.

const promiseHolder = [];

for (let i = 0; i < 10; i += 1) {
  promiseHolder.push('Your Promises');
}

Promise.all(promiseHolder)
  .then((results) => {
    return results;
  })
  .catch((err) => {
    throw err;
  });

In the second approach ( Promise.all()), It consists of all your promises pushed from for loop. If any of promise rejected no more promise called and suddenly you got the state of promise rejection in Promise.all().

Promise.all(promiseHolder)
  .then((results) => {
    return results;
  })
  .catch((err) => {
    console.log('Promise will reject here', err);
    throw err;
  });

I hope it helps, Happy Coding :)

Generate an array of promises to run sequentially

3 Answers3