Axios POST 承诺未按预期工作

Question

我有一个带有 Sequelize/mysql 的 react/node/express 应用程序。使用 Axios 进行 API 调用。

我需要做什么：

1. 将配方发布到数据库
2. 等待上述完成
3. 再次获取配方表以使用新配方更新反应组件状态

目前发生了什么：

1. 配方被发布到数据库
2. GET 配方在 Promise 从 POST 中返回。因此，组件状态得到 设置为旧数据。

我尝试使用 async/await，但这并没有什么不同。

这里是删减的代码：

API.js：

addRecipe: async function(newRecipe) {
    let addRecipe = await axios.post('/api/recipes/new', newRecipe) 
    return addRecipe
},
getRecipes: function() {
    return axios.get('/api/recipes');
}

Recipes.js：

  import API from '../../utils/API';
  state = {
    dbRecipes: []
  }

  getRecipes = () => {
    API.getRecipes()
      .then(res => {
        this.setState({
          dbRecipes: res.data
        })
      })
  }

  handleFormSubmit = event => {
  event.preventDefault();
    API.addRecipe(formData).then(result => {
       this.getRecipes()
    })
  }

添加配方控制器：

exports.addRecipe = function (req, res) {
  const imgPath = req.file.path.replace('client/public','');
  db.Recipe.create({
    RecipeName: req.body.RecipeName,
    RecipeDescription: req.body.RecipeDescription,
    RecipeImage: imgPath
  }).then(function (newRecipe) {
    RecipeIngredients = JSON.parse(req.body.RecipeIngredients)
    var promises = [];
    for (var i = 0; i < RecipeIngredients.length; i++) {
      var RecipeId = newRecipe.dataValues.id;
      promises.push(
        db.RecipeAmount.create({
          Amount: RecipeIngredients[i].AmountForSmall,
          Size: 'sm',
          Type: 'smoothie',
          IngredientId: RecipeIngredients[i].IngredientId,
          RecipeId: RecipeId
        })
      );

      promises.push(
        db.RecipeAmount.create({
          Amount: RecipeIngredients[i].AmountForMedium,
          Size: 'md',
          Type: 'smoothie',
          IngredientId: RecipeIngredients[i].IngredientId,
          RecipeId: RecipeId
        })
      );

      promises.push(
        db.RecipeAmount.create({
          Amount: RecipeIngredients[i].AmountForLarge,
          Size: 'lg',
          Type: 'smoothie',
          IngredientId: RecipeIngredients[i].IngredientId,
          RecipeId: RecipeId
        })
      );
    }

    sequelize.Promise.all(promises).then(function () {
      //this does get logged out in the backend console
      console.log('DONE ADDING');
    });

  });
};

Answer 1

我认为解决方案是通过确保调用 res 回调来调整您的 addRecipe 控制器。看到您的“DONE ADDING”消息已记录，我们可以调用res 回调，如下所示：

sequelize.Promise.all(promises).then(function () {
      //this does get logged out in the backend console
      console.log('DONE ADDING');

    res.send(); // <-- call the response callback to send a response back 
           // to client only after DB has been updated
});

这应该确保您在客户端的 axio 发布仅在新数据进入数据库后完成。反过来，这应该会导致对 API.getRecipes() 的调用仅在数据库更新后才被调用 - 然后一切都应该按预期工作