Axios mixin call order in Vue - vue.js

Question

I'm trying to create a Vue mixin which would handle my Axios calls (I need to do a lot of similar calls from different components).
Mixin code is like this:
import axios from "axios";
const restService = {
methods: {
executeRequest( url, payload ) {
axios
.post(url, JSON.stringify(payload), {
headers: { 'Content-Type': 'application/json' }
})
.then(response => {
return response.data;
})
}
}
}
export default restService
Which I then call from my component like this:
import restService from "#/services/RestService";
export default {
//...
mixins: [restService],
methods: {
saveChanges() {
//...
let response = this.executeAuthorizedRequest( changeData );
this.$notify({
//some logic that depends on my response object
});
}
}
}
The problem is that .then() from the mixin is for some reason called later than my this.notify() from component which leads to an error.
Is there a way to make sure that .then() is called before proceeding? The same axios code works as expected when written in component method itself.
I'm relatively new to JS frameworks so maybe I don't understand something obvious.

Answer 1

Axios calls are asynchronous. So the response may not be returned before this.notify(). You may consider rewriting the axios calls with async/await or Promise to make sure the response is returned. Here is an example with async/await:
import axios from "axios";
const restService = {
methods: {
executeRequest(url, payload) {
return axios
.post(url, JSON.stringify(payload), {
headers: {
'Content-Type': 'application/json'
}
})
}
}
}
export default restService
And use the call like:
import restService from "#/services/RestService";
export default {
//...
mixins: [restService],
methods: {
async saveChanges() {
//...
let response = await this.executeAuthorizedRequest( changeData );
this.$notify({
// do anything here with response.data
});
}
}
}

Answer 2

Try out to use async/await when you call the method and inside the method just return the request :
import axios from "axios";
const restService = {
methods: {
executeRequest( url, payload ) {
return axios.post(url, JSON.stringify(payload), {
headers: { 'Content-Type': 'application/json' }
})
}
}
}
export default restService
then call it like :
import restService from "#/services/RestService";
export default {
//...
mixins: [restService],
methods: {
async saveChanges() {
//...
let response = await this.executeAuthorizedRequest( changeData );
this.$notify({
//some logic that depends on my response object
});
}
}
}