如何确保Axios循环POST请求按用户输入顺序保存数据？

问题根源在于你用forEach循环发起异步请求时，所有请求是并行触发的，数据库会优先处理响应更快的请求，最终导致保存顺序和用户输入顺序不符。移除create方法的async修饰符没用，因为axios.post本身就是异步操作，返回的仍是Promise对象。

可行解决方案： #

1. 用for...of循环串行执行请求

通过for...of配合await，确保每个请求必须等待前一个完成后再发起，严格遵循输入顺序：

async function saveMenuSequentially() {
  for (const fromFormMeal of fromFormMenu) {
    const resp = await MealAPI.create(fromFormMeal, restaurant.id);
    console.log(resp);
  }
}

saveMenuSequentially();

2. 用reduce构建Promise串行链

如果偏好链式写法，可以用reduce把多个Promise串联起来，强制顺序执行：

fromFormMenu.reduce((chain, fromFormMeal) => {
  return chain.then(() => {
    return MealAPI.create(fromFormMeal, restaurant.id).then(resp => console.log(resp));
  });
}, Promise.resolve());

3. 优先使用批量创建接口（推荐）

如果后端支持批量插入，直接一次性提交所有菜品数据，让后端按传入顺序批量写入数据库，既保证顺序又提升性能：

// 假设后端提供批量创建接口，示例代码：
static async createBatch(meals, restaurantId) {
  const response = await axios.post(`${REST_URL}/batch/${restaurantId}`, meals);
  return response;
}

// 调用方式：
MealAPI.createBatch(fromFormMenu, restaurant.id).then(resp => console.log(resp));

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