JS Async/Await异步控制：药品分组修改完成后再删除分组

现有代码的异步时序错乱来自两个核心问题：

• changeMedicineGroup、deleteGroup两个函数内部没有返回fetch生成的Promise，外部拿不到异步任务状态，await无法生效
• forEach遍历不会等待内部异步任务执行，发起所有改分组请求后会立刻同步执行删除逻辑，此时药品归属修改还未完成，就会触发外键约束报错。

1. 调整基础请求函数，返回Promise实例 #

给两个函数内的fetch调用前添加return，将Promise链暴露给外部调用方：

const changeMedicineGroup = (medicineId, groupIdToChangeTo) => {
  return fetch(
    `${process.env.REACT_APP_API_ROOT_URL}/changeMedicineGroup/${medicineId}/${groupIdToChangeTo}`,
    {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
    }
  )
    .then((res) => res.text())
    .then((response) => console.log(response));
};

const deleteGroup = () => {
  return fetch(`${process.env.REACT_APP_API_ROOT_URL}/deletegroup/${data.groupId}`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((res) => res.text())
    .then((response) => console.log(response));
};

2. 改造统一调用逻辑，严格控制执行顺序 #

放弃forEach遍历，改用map生成所有改分组请求的Promise数组，通过Promise.all等待所有改分组请求全部成功后，再执行删除操作，同时增加错误捕获：

const removeMedicinesFromGroup = async () => {
  const unSetGroupId = 24;
  try {
    // 并行发起所有改分组请求，等待全部执行完成
    await Promise.all(
      groupMedicines.map((medicine) =>
        changeMedicineGroup(medicine.medicineId, unSetGroupId)
      )
    );
    // 所有药品归属修改完成后，再执行分组删除
    await deleteGroup();
    // 可在此处添加操作成功后的提示、列表刷新逻辑
  } catch (err) {
    console.error("分组删除操作失败：", err);
    // 可在此处添加错误提示逻辑，比如弹窗告知用户操作失败
  }
};

• Promise.all会等所有传入的请求都成功返回后才会执行后续逻辑，只要有一个改分组请求失败，就会直接进入catch分支，不会执行删除操作，完全规避外键约束报错问题
• 不要用for循环加await串行发请求，会让整体操作耗时变长，Promise.all并行发起请求的性能更优
• 如果业务有特殊要求（不推荐），允许个别药品改分组失败也继续删除，可以给单个changeMedicineGroup调用加catch做错误兜底，保证所有Promise都能正常resolve。

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