JavaScript ES6 promise for loop

Question

for  let i   0  i  lt  10  i          const promise   new Promise  resolve  reject    gt            const timeout   Math random     1000          setTimeout      gt                console log i              timeout                   TODO  Chain this promise to the previous one  maybe without having it running       The above will give the following random output   6 9 4 8 5 1 7 2 3 0   The task is simple  Make sure each promise runs only after the other one   then      For some reason  I couldn t find a way to do it   I tried generator functions  yield   tried simple functions that return a promise  but at the end of the day it always comes down to the same problem  The loop is synchronous   With async I d simply use async series     How do you solve it

User · Answer

Based on the excellent answer by trincot, I wrote a reusable function that accepts a handler to run over each item in an array. The function itself returns a promise that allows you to wait until the loop has finished and the handler function that you pass may also return a promise.

loop(items, handler) : Promise

It took me some time to get it right, but I believe the following code will be usable in a lot of promise-looping situations.

Copy-paste ready code:

// SEE https://stackoverflow.com/a/46295049/286685
const loop = (arr, fn, busy, err, i=0) => {
  const body = (ok,er) => {
    try {const r = fn(arr[i], i, arr); r && r.then ? r.then(ok).catch(er) : ok(r)}
    catch(e) {er(e)}
  }
  const next = (ok,er) => () => loop(arr, fn, ok, er, ++i)
  const run  = (ok,er) => i < arr.length ? new Promise(body).then(next(ok,er)).catch(er) : ok()
  return busy ? run(busy,err) : new Promise(run)
}

Usage

To use it, call it with the array to loop over as the first argument and the handler function as the second. Do not pass parameters for the third, fourth and fifth arguments, they are used internally.

_x000D_

const loop = (arr, fn, busy, err, i=0) => {_x000D_
  const body = (ok,er) => {_x000D_
    try {const r = fn(arr[i], i, arr); r && r.then ? r.then(ok).catch(er) : ok(r)}_x000D_
    catch(e) {er(e)}_x000D_
  }_x000D_
  const next = (ok,er) => () => loop(arr, fn, ok, er, ++i)_x000D_
  const run  = (ok,er) => i < arr.length ? new Promise(body).then(next(ok,er)).catch(er) : ok()_x000D_
  return busy ? run(busy,err) : new Promise(run)_x000D_
}_x000D_
_x000D_
const items = ['one', 'two', 'three']_x000D_
_x000D_
loop(items, item => {_x000D_
  console.info(item)_x000D_
})_x000D_
.then(() => console.info('Done!'))

_x000D_

Advanced use cases

Let's look at the handler function, nested loops and error handling.

handler(current, index, all)

The handler gets passed 3 arguments. The current item, the index of the current item and the complete array being looped over. If the handler function needs to do async work, it can return a promise and the loop function will wait for the promise to resolve before starting the next iteration. You can nest loop invocations and all works as expected.

_x000D_

const loop = (arr, fn, busy, err, i=0) => {_x000D_
  const body = (ok,er) => {_x000D_
    try {const r = fn(arr[i], i, arr); r && r.then ? r.then(ok).catch(er) : ok(r)}_x000D_
    catch(e) {er(e)}_x000D_
  }_x000D_
  const next = (ok,er) => () => loop(arr, fn, ok, er, ++i)_x000D_
  const run  = (ok,er) => i < arr.length ? new Promise(body).then(next(ok,er)).catch(er) : ok()_x000D_
  return busy ? run(busy,err) : new Promise(run)_x000D_
}_x000D_
_x000D_
const tests = [_x000D_
  [],_x000D_
  ['one', 'two'],_x000D_
  ['A', 'B', 'C']_x000D_
]_x000D_
_x000D_
loop(tests, (test, idx, all) => new Promise((testNext, testFailed) => {_x000D_
  console.info('Performing test ' + idx)_x000D_
  return loop(test, (testCase) => {_x000D_
    console.info(testCase)_x000D_
  })_x000D_
  .then(testNext)_x000D_
  .catch(testFailed)_x000D_
}))_x000D_
.then(() => console.info('All tests done'))

_x000D_

Error handling

Many promise-looping examples I looked at break down when an exception occurs. Getting this function to do the right thing was pretty tricky, but as far as I can tell it is working now. Make sure to add a catch handler to any inner loops and invoke the rejection function when it happens. E.g.:

_x000D_

const loop = (arr, fn, busy, err, i=0) => {_x000D_
  const body = (ok,er) => {_x000D_
    try {const r = fn(arr[i], i, arr); r && r.then ? r.then(ok).catch(er) : ok(r)}_x000D_
    catch(e) {er(e)}_x000D_
  }_x000D_
  const next = (ok,er) => () => loop(arr, fn, ok, er, ++i)_x000D_
  const run  = (ok,er) => i < arr.length ? new Promise(body).then(next(ok,er)).catch(er) : ok()_x000D_
  return busy ? run(busy,err) : new Promise(run)_x000D_
}_x000D_
_x000D_
const tests = [_x000D_
  [],_x000D_
  ['one', 'two'],_x000D_
  ['A', 'B', 'C']_x000D_
]_x000D_
_x000D_
loop(tests, (test, idx, all) => new Promise((testNext, testFailed) => {_x000D_
  console.info('Performing test ' + idx)_x000D_
  loop(test, (testCase) => {_x000D_
    if (idx == 2) throw new Error()_x000D_
    console.info(testCase)_x000D_
  })_x000D_
  .then(testNext)_x000D_
  .catch(testFailed)  //  <--- DON'T FORGET!!_x000D_
}))_x000D_
.then(() => console.error('Oops, test should have failed'))_x000D_
.catch(e => console.info('Succesfully caught error: ', e))_x000D_
.then(() => console.info('All tests done'))

_x000D_

UPDATE: NPM package

Since writing this answer, I turned the above code in an NPM package.

for-async

Install

npm install --save for-async

Import

var forAsync = require('for-async');  // Common JS, or
import forAsync from 'for-async';

Usage (async)

var arr = ['some', 'cool', 'array'];
forAsync(arr, function(item, idx){
  return new Promise(function(resolve){
    setTimeout(function(){
      console.info(item, idx);
      // Logs 3 lines: `some 0`, `cool 1`, `array 2`
      resolve(); // <-- signals that this iteration is complete
    }, 25); // delay 25 ms to make async
  })
})

See the package readme for more details.

User · Answer

As you already hinted in your question  your code creates all promises synchronously  Instead they should only be created at the time the preceding one resolves  Secondly  each promise that is created with new Promise needs to be resolved with a call to resolve  or reject   This should be done when the timer expires  That will trigger any then callback you would have on that promise  And such a then callback  or await  is a necessity in order to implement the chain  With those ingredients  there are several ways to perform this asynchronous chaining   With a for loop that starts with an immediately resolving promise  With Array reduce that starts with an immediately resolving promise  With a function that passes itself as resolution callback  With ECMAScript2017 s async   await syntax  With ECMAScript2020 s for await   of syntax   See a snippet and comments for each of these options below  1  With for You can use a for loop  but you must make sure it doesn t execute new Promise synchronously  Instead you create an initial immediately resolving promise  and then chain new promises as the previous ones resolve   x000D   x000D  for  let i   0  p   Promise resolve    i  lt  10  i          p   p then     gt  new Promise resolve   gt          setTimeout function                  console log i               resolve               Math random     1000            x000D   x000D   x000D   2  With reduce This is just a more functional approach to the previous strategy  You create an array with the same length as the chain you want to execute  and start out with an immediately resolving promise   x000D   x000D      Array 10   reduce   p     i    gt       p then     gt  new Promise resolve   gt          setTimeout function                  console log i               resolve               Math random     1000           Promise resolve      x000D   x000D   x000D   This is probably more useful when you actually have an array with data to be used in the promises  3  With a function passing itself as resolution-callback Here we create a function and call it immediately  It creates the first promise synchronously  When it resolves  the function is called again   x000D   x000D   function loop i        if  i  lt  10  new Promise  resolve  reject    gt            setTimeout       gt                console log i               resolve               Math random     1000          then loop bind null  i 1       0   x000D   x000D   x000D   This creates a function named loop  and at the very end of the code you can see it gets called immediately with argument 0  This is the counter  and the i argument  The function will create a new promise if that counter is still below 10  otherwise the chaining stops  The call to resolve   will trigger the then callback which will call the function again  loop bind null  i 1  is just a different way of saying     gt  loop i 1   4  With async await Modern JS engines support this syntax   x000D   x000D   async function loop         for  let i   0  i  lt  10  i              await new Promise resolve   gt  setTimeout resolve  Math random     1000            console log i               x000D   x000D   x000D   It may look strange  as it seems like the new Promise   calls are executed synchronously  but in reality the async function returns when it executes the first await  Every time an awaited promise resolves  the function s running context is restored  and proceeds after the await  until it encounters the next one  and so it continues until the loop finishes  As it may be a common thing to return a promise based on a timeout  you could create a separate function for generating such a promise  This is called promisifying a function  in this case setTimeout  It may improve the readability of the code   x000D   x000D  const delay   ms   gt  new Promise resolve   gt  setTimeout resolve  ms      async function loop         for  let i   0  i  lt  10  i              await delay Math random     1000           console log i               x000D   x000D   x000D   5  With for await   of With EcmaScript 2020  the for await   of found its way to modern JavaScript engines  Although it does not really reduce code in this case  it allows to isolate the definition of the random interval chain from the actual iteration of it   x000D   x000D  const delay   ms   gt  new Promise resolve   gt  setTimeout resolve  ms    async function   randomDelays count  max        for  let i   0  i  lt  count  i    yield delay Math random     max  then      gt  i       async function loop         for await  let i of randomDelays 10  1000   console log i         x000D   x000D   x000D

User · Answer

You can use async await for this  I would explain more  but there s nothing really to it  It s just a regular for loop but I added the await keyword before the construction of your Promise  What I like about this is your Promise can resolve a normal value instead of having a side effect like your code  or other answers here  include  This gives you powers like in The Legend of Zelda  A Link to the Past where you can affect things in both the Light World and the Dark World     ie  you can easily work with data before after the Promised data is available without having to resort to deeply nested functions  other unwieldy control structures  or stupid IIFEs      where DarkWorld is in the scary  unknown future    where LightWorld is the world we saved from Ganondorf LightWorld     await DarkWorld   So here s what that will look like       x000D   x000D  const someProcedure   async n   gt  x000D      x000D      for  let i   0  i  lt  n  i      x000D        const t   Math random     1000 x000D        const x   await new Promise r   gt  setTimeout r  t  i   x000D        console log  i  x  x000D        x000D      return  done  x000D      x000D   x000D  someProcedure 10  then x   gt  console log x        gt  Promise x000D     0 0 x000D     1 1 x000D     2 2 x000D     3 3 x000D     4 4 x000D     5 5 x000D     6 6 x000D     7 7 x000D     8 8 x000D     9 9 x000D     done x000D   x000D   x000D    See how we don t have to deal with that bothersome  then call within our procedure  And async keyword will automatically ensure that a Promise is returned  so we can chain a  then call on the returned value  This sets us up for great success  run the sequence of n Promises  then do something important     like display a success error message

User · Answer

here s my 2 cents worth    resuable function forpromise   emulates a classic for loop allows for early exit based on internal logic  returning a value can collect an array of results passed into resolve next collect defaults to start 0 increment 1 exceptions thrown inside loop are caught and passed to  catch      x000D   x000D      function forpromise lo  hi  st  res  fn    x000D          if  typeof res      function     x000D              fn   res  x000D              res   undefined  x000D            x000D          if  typeof hi      function     x000D              fn   hi  x000D              hi   lo  x000D              lo   0  x000D              st   1  x000D            x000D          if  typeof st      function     x000D              fn   st  x000D              st   1  x000D            x000D          return new Promise function resolve  reject    x000D   x000D               function loop i    x000D                  if  i  gt   hi  return resolve res   x000D                  const promise   new Promise function nxt  brk    x000D                      try   x000D                          fn i  nxt  brk   x000D                        catch  ouch    x000D                          return reject ouch   x000D                        x000D                      x000D                  promise  x000D                  catch  function brkres    x000D                      hi   lo - st  x000D                      resolve brkres  x000D                     then function el    x000D                      if  res  res push el   x000D                      loop i   st  x000D                      x000D                 lo   x000D   x000D              x000D        x000D   x000D   x000D        no result returned  just loop from 0 thru 9 x000D      forpromise 0  10  function i  next    x000D          console log  iterating    i   x000D          next    x000D         then function     x000D   x000D   x000D          console log  test result 1   arguments   x000D   x000D            shortform no result returned  just loop from 0 thru 4 x000D          forpromise 5  function i  next    x000D              console log  counting    i   x000D              next    x000D             then function     x000D   x000D              console log  test result 2   arguments   x000D   x000D   x000D   x000D                collect result array  even numbers only x000D              forpromise 0  10  2      function i  collect    x000D                  console log  adding item    i   x000D                  collect  result-    i   x000D                 then function     x000D   x000D                  console log  test result 3   arguments   x000D   x000D                    collect results  even numbers  break loop early with different result x000D                  forpromise 0  10  2      function i  collect  break     x000D                      console log  adding item    i   x000D                      if  i     8  return break   ending early    x000D                      collect  result-    i   x000D                     then function     x000D   x000D                      console log  test result 4   arguments   x000D   x000D                         collect results  but break loop on exception thrown  which we catch x000D                      forpromise 0  10  2      function i  collect  break     x000D                          console log  adding item    i   x000D                          if  i     4  throw new Error  failure inside loop    x000D                          collect  result-    i   x000D                         then function     x000D   x000D                          console log  test result 5   arguments   x000D   x000D                          x000D                      catch  function err    x000D   x000D                          console log  caught in test 5  Error    err message        x000D   x000D                          x000D   x000D                      x000D   x000D                  x000D   x000D   x000D              x000D   x000D   x000D   x000D          x000D   x000D   x000D

User · Answer

If you are limited to ES6  the best option is Promise all  Promise all array  also returns an array of promises after successfully executing all the promises in array argument  Suppose  if you want to update many student records in the database  the following code demonstrates the concept of Promise all in such case- let promises   students map  student  index    gt      where students is a db object student rollNo   index   1  student city    City Name     Update whatever information on student you want return student save        Promise all promises  then      gt        All the save queries will be executed when  then is executed     You can do further operations here after as all update operations are completed now      Map is just an example method for loop  You can also use for or forin or forEach loop  So the concept is pretty simple  start the loop in which you want to do bulk async operations  Push every such async operation statement in an array declared outside the scope of that loop  After the loop completes  execute the Promise all statement with the prepared array of such queries promises as argument  The basic concept is that the javascript loop is synchronous whereas database call is async and we use push method in loop that is also sync  So  the problem of asynchronous behavior doesn t occur inside the loop

[javascript] JavaScript ES6 promise for loop

The answer is

loop(items, handler) : Promise

Usage

Advanced use cases

handler(current, index, all)

Error handling

UPDATE: NPM package

for-async

Install

Import

Usage (async)

Examples related to javascript

Examples related to es6-promise

Tags