理解 Vue 和 Return 和 Async Await

Question

我是 Javascript 和 Vue 的新手，我很难将返回、异步和等待一起工作。我来自 Python 背景和 JS 语法完全不同

所以......问题的一些背景......我正在构建一个 Vue 博客并使用模块模式创建多个 Vuex 商店。我还在创建一个从 Prismic 检索数据的函数。

./store/blog.js

import {MyFunctions} from "../plugins/myfunctions.js";

export const actions = {

    async retrievePosts() {

        console.log("HELLO")

        return MyFunctions.MyFunction("blog_post");

    }

}

./plugins/myfunctions.js

import Prismic from "prismic-javascript";

import PrismicDom from "prismic-dom" //importing the Dom

import PrismicConfig from "../prismic.config.js";

export const MyFunctions = {

    MyFunction: async function (doctype) {

        console.log("Before")

        const api = await Prismic.getApi(PrismicConfig.apiEndpoint)

        let blog_post = {}

        const results = await api.query(

            Prismic.Predicates.at("document.type", doctype),

            { lang: "en-us" } //This is a Prismic query option

        )

        console.log("After")

        result = results.results

        return result;

    }

};

这是我的问题：

1. 在 blog.js 中，如果我删除 MyFunctions.MyFunction("blog_post") 前面的“return”一词，则 myfunctions.js 中的 await 不会被激活。为什么？我这样说是因为没有返回，“之前”是控制台记录的，但“之后”不是，并且没有返回任何内容。

我的启蒙还有一个问题：

1. return MyFunctions.MyFunction("blog_post") 返回到哪里？所以数据返回到retrievePosts() 但它是我相信的一个javascript对象的{}的一部分？那么它会变成 {} 中的属性吗？

Answer 1

Ans 1：您实际上是在异步模式下将一个函数返回给 retrievePosts() 的调用者。通过删除 return，函数将被执行，但它不会对 retrievePosts() 函数的调用者产生任何影响。Ans 2: MyFunctions.MyFunction("blog_post") 被返回给retrievePosts() 函数的调用者。