Question

我最近在javascript中遇到了promise chain的问题，特别是在Vue.js. 这是我的代码，我有一个addItem函数，可以在数据库中插入一个项目。我想让这个函数运行它在数据库中插入东西然后使用getItems函数来更新所有数据。但是，我发现这个函数会先运行.then中的东西然后再将项目插入数据库中。这导致我的代码破裂。如果你们中的任何一个人能帮助我，那就太棒了！

  addItem: function() {
  this.$store.dispatch('addJournal',{
   journal: this.text,
   page: this.maxPage + 1, // increase the page number
    }).then(response => {
      this.text = ""; // set the input to empty
      this.getItems(); // get all the data from database
      this.setMaxPage(); // reset the max size
      this.currentPage = this.maxPage; // go to the max page
      this.option = "current";// set back to current
    }).catch(err => {
    });
},

这是其他相应的代码

getItems: function() {
  this.pages = [];
  var tempArray = [];
  tempArray = this.$store.getters.feed;
  for (var index = 0; index < tempArray.length; ++index) {
  let page = {text:tempArray[index].journal, 
  pageNumber:tempArray[index].page};
  this.pages.push(page);
 }
},

这是store.js中的addJournal函数

addJournal(context,journal) {
   console.log("this is for users", context.state.user.id)
   axios.post("/api/users/" + context.state.user.id + "/journals",journal).then(response => {
     return context.dispatch('getFeed');
        }).catch(err => {
    console.log("addJournal failed:",err);
  });
  context.dispatch('getFeed');
}

Answer 1

您需要将addJournal转换为返回承诺的内容，以便与then一起使用：

addJournal(context, journal) {
  console.log("this is for users", context.state.user.id)
  context.dispatch('getFeed');
  return axios.post("/api/users/" + context.state.user.id + "/journals", journal).then(response => {
    return context.dispatch('getFeed');
  }).catch(err => {
    console.log("addJournal failed:", err);
  });
}

不确定context.dispatch('getFeed');是做什么的，但由于post是异步的，因此将其移到axios.post行之上不应该有任何问题。 axios.post已经返回一个承诺，所以你只需要返回它。

Answer 2

.then()致力于承诺

this.$store.dispatch('addJournal').then(...)按预期工作，addJournal应该是一个承诺。

这里＆＃39>

  addJournal(context, journal) {
    return new Promise((resolve, reject) => {
      axios
        .post("/api/users/" + context.state.user.id + "/journals", journal)
        .then(response => {
          context.dispatch("getFeed");
          resolve();
        })
        .catch(err => {
          console.log("addJournal failed:", err);
          reject(err);
        });
    });
  }

承诺链故障

2 个答案: