Async method not waiting for a function - VUE Async method not waiting for a function - VUE vue.js vue.js

Async method not waiting for a function - VUE


You aren't returning anything from the loadtags method, so the code doesn't wait.

Change this:

loadtags () {  this.$axios    .get(...

To this:

loadtags () {  return this.$axios    .get(...

async/await is more or less just sugar over Promises, so returning the Promise gives you something to await in the other method.


This is how I resolved this in my Vue application.

Before a user submits a new "tag" with submitNewTag() I need to check if it exists already in the list of tags, using async theTagExists().

submitNewTag() {  this.clearError();  this.theTagExists().then((res) => {    if (!res) {      console.log("TAG DOES NOT EXIST, SO ADD IT TO THE DATABASE");      this.saveTagToDatabase();    }  });},async theTagExists() {  console.log("CHECKING IF A TAG EXISTS");  await axios.get(`${this.apiUrl}/alltags`).then((res) => {    console.log("CHECKING IS DONE");    this.tagExists = res.data.allTags.some(      res =>        res.name.trim().toLowerCase() ===        this.newTag.tagName.trim().toLowerCase()    );  });  console.log("RETURN THE RESULT");  return this.tagExists;},