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