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

You're calling the outer functions synchronously, so both are started at the same time. You would need to make them Async and await them in buildCharacter (and await the promise returned by your reduces) before returning. — pilchard
– pilchard, Commented May 16, 2022 at 21:11

Ayzrian · Accepted Answer · 2022-05-16 21:14:54Z

2

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)
  ]);
}

answered May 16, 2022 at 21:14

Ayzrian

2,4751 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

Instead of using reduce, I'd recommend a simple for loop with an await on the function call

Edgar Gc Over a year ago

I tried B solution bun have the same error TypeError: Cannot set properties of null (setting 'innerHTML') -> en paintData

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related