How to loop through/map an array to a function that returns a promise that includes another promise

Question

I've been trying loop through an array of items such that each is used in an operation that returns a promise, but within that promise there's another promise. I'm not getting the desired flow. What am I doing wrong? Or is there a better way. I couldn't use much chaining because of the conditionals. I have tried async/await in several ways still the same undesired result.

The codes have been simplified for clarity. The fetch calls are actually database operations, but the behaviours are still the same; also I've used a single-element array in this case.

var names = ['mike'];
console.log('black');

var fn = function doThings(name) {
  return new Promise((resolve) => {
    console.log('blue');

    var char = name.substr(1);
    getNum(char);
    console.log('violet');

    function getNum(ch) {
      console.log('green');

      fetch('fetchfrom.url')
      .then(response => {
        console.log('orange');

        return response.json();
      })
      .then(n => {

        if(n === 2) {
          console.log('red1');

          fetch('fetchfrom.url')
          .then(response => {
            console.log('yellow');

            return response.json();
          }).then(color => {
            if(n === 2) {
              console.log('red2');

              resolve(5);
            }
            else {
              console.log('brown2');

              resolve(10);
            }
          });
          console.log('lilac');

        } else {
          console.log('brown1');

          resolve(20);
        }

      });
    }

  })


}

var actions = names.map(fn);

Promise.all([actions])
.then(() => {
  console.log('done');
})

I expect the logs to be in the order (assuming n always equals 2): black...blue...green...orange...red1...yellow...red2...lilac...violet...done

But instead i consistently get: black...blue...green...violet...done...orange...red1...yellow...red2...lilac

Turtlefight · Answer 1 · 2019-07-29T16:55:07.437

You need to properly propagate the promises.

The new Promise() constructor is not needed in your example, you need to properly call .then() whenever you do something async.
when you call fetch() in a .then() handler, return the promise to keep the promise-chain intact.
no code after an async action, e.g.: fetch().then();, because the code after that will be executed immediately instead of after the fetch call completed.

You could use async / await, in which your example would look something like this:

var names = ['mike'];
console.log('black');

async function getNum(ch) {
  console.log('green');
  let response = await fetch('fetchfrom.url');
  console.log('orange');
  let n = await response.json();

  if (n === 2) {
    console.log('red1');
    let res = await fetch('fetchfrom.url');
    console.log('yellow');
    let color = await res.json();
    if (n === 2) {
      console.log('red2');
      return 5;
    } else {
      console.log('brown2');
      return 10;
    }
    console.log('lilac');
  } else {
    console.log('brown1');
    return 20;
  }
}

async function doThings(name) {
  console.log('blue');
  var char = name.substr(1);
  let num = await getNum(char);
  console.log('violet');
  return num;
}

var actions = names.map(fn);
Promise.all([actions])
  .then(() => {
    console.log('done');
  });

without async / await & only plain promises you could do:

var names = ['mike'];
console.log('black');

function getNum(ch) {
  console.log('green');
  return fetch('fetchfrom.url').then(response => {
    return response.json();
  }).then(n => {
    console.log('orange');
    if (n === 2) {
      console.log('red1');
      return fetch('fetchfrom.url').then(res => {
        console.log('yellow');
        return res.json();
      }).then(color => {
        if (n === 2) {
          console.log('red2');
          return 5;
        } else {
          console.log('brown2');
          return 10;
        }
      }).then(result => {
        console.log('lilac');
        return result;
      });
    } else {
      console.log('brown1');
      return 20;
    }
  });
}

function doThings(name) {
  console.log('blue');
  var char = name.substr(1);
  return getNum(char).then(num => {
    console.log('violet');
    return num;
  });
}

var actions = names.map(fn);
Promise.all([actions])
  .then(() => {
    console.log('done');
  });

both should result in the expected log order.

Never nest then-ables, it's a promise antipattern. Just return them to the chain. — robe007, Jul 31 '19 at 16:13
@robe007 it's only an anti-pattern if you break the chain, which i didn't do. But i agree it's a mess - if it were my code i would prefer either `async / await` or if that's not possible refactoring `getNum` into individual functions. I just wrote it that way so OP can compare it with his code snippet. — Turtlefight, Jul 31 '19 at 16:22
@robe007 Not sure what you're talking about - nested `.then()`s don't affect error handling. if anything anywhere fails in that path the main chain will error out and try to find the next error handler .catch or .then(null, handler). see https://jsfiddle.net/05bmhxoq . As said though i wouldn't recommend writing this kind of code if you can avoid it, it would be best to re-structure it into individual functions. — Turtlefight, Jul 31 '19 at 17:17

robe007 · Answer 2 · 2019-08-06T14:32:04.723

Another approach on plain promises, is using Promise.all and playing an if-else game with the results:

// These Promises are for ilustrative purposes, but indeed are your fetch's
const promiseA = Promise.resolve(2);
const promiseB = Promise.resolve(2);

// More than one 'name' in the array
const names = ['mike', 'john'];
console.log('black');

const getNum = ch => {
  let response;
  console.log('green');
    return Promise.all([promiseA, promiseB]).then(([PromiseA, PromiseB]) => {
           //^^^^^^^^^^^^^^^^^^^^^^ Resolve all promises to use them now with if-else
    console.log('orange');
    if (PromiseA == 2) {
      console.log('red1');
      console.log('yellow');
      // In your example, you said: if(PromiseA==2). Here I use the second promise
      if (PromiseB == 2) {
        console.log('red2');
        response = 5;
      } else {
        console.log('brown2');
        response = 10;
      }
      console.log('lilac');
    } else {
      console.log('brown1');
      response = 20;
    }
    return response;
  });
};

const doThings = name => {
  console.log(`=>>>>> Evaluating name ${name}`);
  console.log('blue');
  const char = name.substr(1);
  return getNum(char).then(num => {
    console.log('violet');
    return num;
  });
};

// Immediately resolving promise, and then chain new promises
// as the previous ones resolve
let op = Promise.resolve();
const actions = names.map(m => (op = op.then(() => doThings(m))));

Promise.all(actions)
  .then(finalResponse => {
    console.log(`done ${finalResponse}`);
  })
  .catch(e => console.log(`There was an error ${e}`));

This solution avoids using nested then-ables, and your code now looks more readable.

NOTE: The Promise.all solution works semantically with concurrent execution of promises. If the semantical execution is secuentially, take a look here. But in all cases, semantical execution or not, the result will be the same.

How to loop through/map an array to a function that returns a promise that includes another promise

2 Answers2