Promise allSettled running before promise finally

Question

我有一个 function 尝试加载 web 图像并跟踪加载图像的计数和失败图像的计数。 我正在使用fetch加载图像，并在验证所有图像后使用Promise.allSettled运行操作。

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

我面临的问题是 finally 块。 对于最后一张图片，finally 块在allSettled回调之后运行。 这会导致imagesValidated小于实际扫描的图像数。 我不想删除 finally 块，因为将来我会在其中添加更多清理代码。

这是 Promise 解析方法的预期行为吗？ 有没有一种方法可以在不删除 finally 块的情况下修复此代码？

Answer 1

您正在将fetch Promise 推送到数组 - 而不是通过.then和.finally的链。 将整个链式 Promise 推入数组。

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

或者，更好的是，对原始数据使用.map 。

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

不过，请注意，使用Promise.allSettled在这里对您没有多大帮助 - 由于.catch ，Promises 都不能拒绝。 考虑使用Promise.all ，或仅使用Promise.allSettled .fetch ，这样您就可以在所有响应都返回后递增计数器。