Complete one promise array first, then complete another promise array JavaScript

Question

I have a problem with promises and have no idea how resolve this:

My idea is to have two methods that are a "dispatcher". In testFetchFaceCharacter() call all promises that I need to resolved first. Need all data from state: {Body:{}, TopA:{}, eyes:{}} When testFetchCharacter() finished, immediately start testFetchTopCharacter(), only if all previous promises executed successfully.

However, at this point (with this code) have a errors. The promises aren't executed "Synchronously". still retrieved "asynchronously". Which "should not happen". Since it "reduce" (from what I read in several articles) avoided that behavior.

const buildCharacter = (state) => {
  try {
    testFetchFaceCharacter(state);
    testFetchTopCharacter(state);
  } catch (e) {
    console.error(e + "En buildCharacter");
}

const testFetchCharacter = (state) => {
  const promises = [
    fetchCustom(state.Body.id, state.Body.file),
    fetchCustom(state.TopA.id, state.TopA.file),
    fetchCustom(state.eyes.id, state.eyes.file),
    fetchCustom(state.mouth.id, state.mouth.file),
    fetchCustom(state.nose.id, state.nose.file),
    fetchCustom(state.eyebrow.id, state.eyebrow.file),
    fetchCustom(state.Clothing.id, state.Clothing.file),
  ];
  
  promises.reduce(async (previousPromise, nextPromise) => {
    await previousPromise
    return nextPromise
  }, Promise.resolve());
}

const testFetchTopCharacter = (state) => {
  const promises = [
    fetchCustom(state.beard.id, state.beard.file),
    fetchCustom(state.hat.id, state.hat.file),
    fetchCustom(state.hair.id, state.hair.file),
    fetchCustom(state.glass.id, state.glass.file)
  ];

  promises.reduce(async (previousPromise, nextPromise) => {
    await previousPromise
    return nextPromise
  }, Promise.resolve());
}

Y try this:

Execute -> Body
Execute -> TopA
Execute -> [eyes, mouth, nose, Clothing, eyebrow] //No matter the order

then
 Execute [beard, hat, hair, glass] //not matter the order

Answer 1

First of all, there is a mistake in your code. You need to understand that as soon as you called a function, you triggered a logic that does something, even if you don't listen to the promise right away, the logic is executing.

So what happened, is that you launched all actions in "parallel" when you are doing function calls in the promises array.

Solution A

You need to "postpone" the actual call of a function until the previous function was successful, you can either do it manually, e.g.

const testFetchTopCharacter = async (state) => {
   await fetchCustom(state.beard.id, state.beard.file),
   await fetchCustom(state.hat.id, state.hat.file),
   await fetchCustom(state.hair.id, state.hair.file),
   await fetchCustom(state.glass.id, state.glass.file)
}

Solution B

If you want to use reducer you need to use callback in that array, so that when promise is completed you call the next callback in the chain.

const testFetchTopCharacter = (state) => {
  const promises = [
    () => fetchCustom(state.beard.id, state.beard.file),
    () => fetchCustom(state.hat.id, state.hat.file),
    () => fetchCustom(state.hair.id, state.hair.file),
    () => fetchCustom(state.glass.id, state.glass.file)
  ];

  promises.reduce((promise, callback) => promise.then(callback), Promise.resolve());
}

Solution C

If an order doesn't matter to you just do Promise.all

const testFetchTopCharacter = (state) => {
  return Promise.all([
    fetchCustom(state.beard.id, state.beard.file),
    fetchCustom(state.hat.id, state.hat.file),
    fetchCustom(state.hair.id, state.hair.file),
    fetchCustom(state.glass.id, state.glass.file)
  ]);
}