Promise Chain Out of Order

Question

I recently met a problem with promise Chain in javascript, specifically in Vue.js. This is my code, I have a addItem function that insert an item in database. I want to have this function run it insert things in database then use getItems function to renew all the data. However, what I find out is that this function will run the things in the .then first then insert the item in the database at last. This caused my code to break. If any of you can help me that will be great!

  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 => {
    });
},

this is other corresponding code

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);
 }
},

this is the addJournal function in store.js

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

You need to convert addJournal into something that returns a promise, so that it can be consumed with 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);
  });
}

Not sure what context.dispatch('getFeed'); does, but since post ing is asynchronous, there shouldn't be anything wrong with moving it above the axios.post line. axios.post returns a promise already, so you just need to return it.

Answer 2

.then() works on promise

for this.$store.dispatch('addJournal').then(...) to work as expected, addJournal should be a promise.

Here's how

  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);
        });
    });
  }