reactjs Axios POST请求周期

nbnkbykc  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(181)

我需要保存餐厅菜单中的菜肴列表。我是这样做的:

fromFormMenu.forEach(fromFormMeal => {
    MealAPI.create(fromFormMeal, restaurant.id).then(resp => console.log(resp))
})

在本例中,菜肴保存到数据库的顺序与用户在表单中输入的顺序不一致。下面是我的API方法的外观:

static async create(meal, restaurantId) {
    const response = await axios.post(REST_URL + "/" + restaurantId, meal);
    return response
}

对我来说,记录的保存顺序与用户输入的顺序一样是必要的。我认为问题与请求的异步有关,因为请求的异步,记录以随机顺序存储。我甚至尝试删除方法声明中的“async”,但没有成功。

uplii1fm

uplii1fm1#

得到错误顺序的原因是你同时调用了所有的api,如果其中一些比前面的项目完成得快,那么它将比它们先被保存。
因此在这种情况下,您可能希望在第一个api完成后调用下一个api。
比如:

const mainFunction = async () => {
  for (let i = 0; i < fromFormMenu.length; i++) {
    const resp = await MealAPI.create(fromFormMeal, restaurant.id)
    console.log(resp)
  }
}

相关问题