Promise allSettled running before promise finally

Question

I have a function that tries to load web images and tracks the count of loaded images and the count of the failed images. I am loading the images using fetch and using Promise.allSettled to run operations after all the images are validated.

const data = ["/test1.png", "/test2.png", "/test3.png"];
let imagesValidated = 0;
let imagesFailed = 0;
const promiseArr = [];

data.forEach((item) => {
  const imgPromise = fetch(item);
  promiseArr.push(imgPromise);

  imgPromise
    .then((resp) => {
      if (!resp.ok()) imagesFailed += 1;
    })
    .catch((error) => {
      imagesFailed += 1;
    })
    .finally(() => {
      // For the last image `test3.png`, the finally blocks runs after `allSettled`.
      imagesValidated += 1;
    });
});

Promise.allSettled(promiseArr).then(() => {
  // some operations
});

The issue I am facing is with the finally block. For the last image the finally block is running after the allSettled callback. This causes the imagesValidated to be lesser than the actual images scanned count. I do not want to remove the finally block as in the future I will be adding more cleanup code into it.

Is this the expected behavior of the Promise resolution methods? Is there a way I can fix this code without removing the finally block?

Answer 1

You're pushing the fetch Promise to the array - not the chain that goes through .then and .finally . Push the whole chained Promise to the array.

data.forEach((item) => {
  promiseArr.push(
  fetch(item)
    .then((resp) => {
      if (!resp.ok()) imagesFailed += 1;
    })
    .catch((error) => {
      imagesFailed += 1;
    })
    .finally(() => {
      // For the last image `test3.png`, the finally blocks runs after `allSettled`.
      imagesValidated += 1;
    })
  );
});

Promise.allSettled(promiseArr).then(() => {
  // some operations
});

Or, even better, use .map on the original data instead.

Promise.allSettled(
  data.map(item => fetch(item)
    .then((resp) => {
      if (!resp.ok()) imagesFailed += 1;
    })
    .catch((error) => {
      imagesFailed += 1;
    })
    .finally(() => {
      // For the last image `test3.png`, the finally blocks runs after `allSettled`.
      imagesValidated += 1;
    })
)
  .then(() => {
    // some operations
  });

Though, note that using Promise.allSettled isn't helping you that much here - none of the Promises can reject due to the .catch . Consider either using Promise.all , or use Promise.allSettled with just the .fetch , so you can increment the counters after all responses have come back.