Why method in in mixin returns object Promise?

Question

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!

Mino mnz · Accepted Answer · 2022-01-13T17:25:23.530

2

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

edited Jan 13 '22 at 17:25

answered Jan 12 '22 at 06:05

Mino mnz

181
1
4

Defining mounted as async ? Could you please explain it? – Petro Gromovo Jan 12 '22 at 11:07
1

It's just an exemple for log the correct this.about value. You can also use classic Promise then / catch. – Mino mnz Jan 12 '22 at 11:55
Could you please give link to classic Promise then / catch example? – Petro Gromovo Jan 12 '22 at 15:23
I have edit the main response – Mino mnz Jan 13 '22 at 17:25

Why method in in mixin returns object Promise?

1 Answers1