为什么mixin中的方法返回对象Promise？ [复制]

Question

在 vuejs3 应用中我想使用 common 方法，所以我把它放到 mixin resources/js/appMixin.js 中：

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() {

但是在 vue 文件中调用这个方法：

mounted() {
    this.about= this.getBlockPage("about");
    console.log('AFTER this.about::') // I DO NOT this output
    console.log(this.about)
},

并输出关于我看到的 var

"[object Promise]"

哪种方式有效？

那个问题似乎有点具体，然后提供了链接，因为方法在 mixin 内部...

提前致谢！

Answer 1

是的，getBlockPage 是一个异步函数，总是返回 Promise。

async mounted() {
  this.about= await this.getBlockPage("about");
  console.log(this.about)
},

或

mounted(){
  this.getBlockPage("about")
    .then(result => {
       console.log(result);
    )
    .catch(error => {
      //error handler
    });
}

您可以在这里了解更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Async / await 只是在你的函数上定义 Promise 行为的语法糖