In vuejs3 app I want to use common method, so I put it into mixin resources/js/appMixin.js as :
export default {
methods: {
async getBlockPage(page_slug) {
const response = await axios.post('/get_block_page', {slug: this.page_slug})
console.log('response.data.page::')
console.log(response.data.page) // In the browser console I see this valid page object returned
return response.data.page;
}, // getBlockPage() {
but calling this method in vue file :
mounted() {
this.about= this.getBlockPage("about");
console.log('AFTER this.about::') // I DO NOT this output
console.log(this.about)
},
and outputting about var I see
"[object Promise]"
Which is the valid way?
That question seems a bit specific then provided link, as method is inside of mixin...
Thanks in advance!
Yes sure, getBlockPage is an async function, always return Promise.
async mounted() {
this.about= await this.getBlockPage("about");
console.log(this.about)
},
or
mounted(){
this.getBlockPage("about")
.then(result => {
console.log(result);
)
.catch(error => {
//error handler
});
}
You can learn more here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Async / await is just a syntaxic sugar for define Promise behavior on your function