如何让JavaScript循环等待后端调用完成？React状态更新问题

你的问题核心在于downloadAttachment是异步操作，forEach不会等待这些异步任务完成就直接执行了setImprintInfo，导致状态更新时部分对象还没拿到下载的Blob。下面是两种靠谱的解决思路：

方法一：用Promise.all等待所有异步任务完成（适用于所有下载必须成功的场景） #

用map替代forEach生成每个元素的处理Promise，再通过Promise.all等待全部完成后更新状态，同时遵循React状态不可变原则，不直接修改原对象：

const setupImprintInfo = async (imprints: Imprint[]) => {
  // 为每个印记生成处理Promise，需要下载的等待接口返回，不需要的直接返回原对象
  const processedImprints = await Promise.all(
    imprints.map(imprint => {
      if (imprint.shouldDownloadAttachment) {
        // 下载完成后返回新对象，避免修改原数据
        return downloadAttachment(imprint.id).then(blob => ({
          ...imprint,
          attachment: blob
        }));
      }
      return Promise.resolve(imprint);
    })
  );

  // 所有下载完成后再更新状态
  setImprintInfo({ imprints: processedImprints });
};

关键点说明： #

• async/await语法让异步代码更易读，你也可以用Promise.all().then(...)的链式写法
• 不直接修改原imprint对象，而是通过展开运算符...imprint创建新对象，避免React状态更新时的意外问题
• Promise.all会等待所有异步任务成功完成后才继续执行，确保状态更新时所有需要下载的对象都已拿到Blob

方法二：用Promise.allSettled允许部分下载失败（适用于即使个别下载失败，仍保留其他成功结果的场景） #

如果担心某个下载接口失败导致整个流程卡住，可以用Promise.allSettled，它会等待所有任务完成（无论成功或失败），之后你可以自行处理失败的情况：

const setupImprintInfo = async (imprints: Imprint[]) => {
  const results = await Promise.allSettled(
    imprints.map(imprint => {
      if (imprint.shouldDownloadAttachment) {
        return downloadAttachment(imprint.id)
          .then(blob => ({ ...imprint, attachment: blob }))
          // 把原对象传递下去，方便后续处理失败情况
          .catch(err => ({ ...err, originalImprint: imprint }));
      }
      return Promise.resolve(imprint);
    })
  );

  // 处理结果：成功的取返回值，失败的可以返回原对象或标记错误
  const processedImprints = results.map(result => {
    if (result.status === 'fulfilled') {
      return result.value;
    }
    // 这里可以根据需求调整，比如给失败的对象加个error标记
    return { ...result.reason.originalImprint, downloadFailed: true };
  });

  setImprintInfo({ imprints: processedImprints });
};

内容的提问来源于stack exchange，提问作者Scott