Yeoman 生成器运行异步最佳实践答案

【问题标题】：Yeoman generator run async best practiceYeoman 生成器运行异步最佳实践
【发布时间】：2020-07-29 00:43:20
【问题描述】：

我正在创建一个运行正常的 yeoman 生成器，现在我需要添加一个列表从异步（我希望它在后台运行）调用可能需要大约 2-3 秒来检索数据，所以我把它放在initializing 中，因为用户将把这个问题作为第三个问题。（见下面的对象）所以当用户点击问题3时，数据检索过程将开始避免等待。基本上我希望数据检索将在后台进程中完成..

我的问题是：

他们的异步使用处理好吗？我的意思是在initialize 方法中运行异步

我尝试的是以下内容：


export default class AppGenerator extends Generator {
    private listData: ListInstance[];


    async initializing() {
        this.props = {
            appName: "app",
            apiName: "app-api",
        };
        //--------------Here I call to async function --------------//
        this.listData = await GetInstances();
    }

    async prompting() {
        const answers = await this.prompt([
            {
                name: "appName",
                message: "Project name: ",
                type: "input",
                default: this.props.appName,

            },
            {
                name: "apiName",
                message: "API name: ",
                type: "input",
                default: this.props.apiName,
            },
            {
                name: "instanceName",
                type: "list",
                message: "Choose instance",
                choices: this.listData,
            },
        ];
    }

writing() {

//here I dont get the `this.answers` , I need to get the values from the answers

}

【问题讨论】：

您能否提供更多详细信息...例如正在触发的 HTML 和事件...我对问题出在哪里有点困惑...应用程序流程...情况如何工作，这个提示功能在做什么？我对你分享的 sn-p 不太了解。
@HimanshuBansal - 假设您正在创建和 yeoman 生成器，其中一个问题应该返回来自 rest 调用的数据列表（可能需要 1-3 秒），并且您想要运行它后台处理，当用户点击这个问题时，他不需要等待3秒来获取数据，你会怎么做？
我明白了但是..你是在发出任何http请求还是从服务或其他方式..如果它在初始化..它会像你说的那样获取接下来的3个问题..它需要在后台运行..所以我无法理解流程。如果你能清除它..我很乐意以更好的方式帮助你......
@HimanshuBansal - 该服务正在调用本地 API（它不公开..）lets assume its a function that you are calling to some rest which take about 3 seconds (or more, network....) and the data should be fetch at the initialization as we dont want to waste time, but it should be ready on question 3 instanceName` 你会怎么做？工作线程？ instanceName 需要访问这些数据
@HimanshuBansal - 现在更清楚了吗？

标签： javascript node.js async-await yeoman yeoman-generator

【解决方案1】：

首先是一些观察：

Yeoman 使用 Inquirer.js 1
Inquirer.js 有反应提示 2
最后，我还没有测试过这段代码。请原谅或指出错误

另外，请确保您的答案可以在 Prompting 方法之外访问（即，对类使用 this - 用于示例）

...
    async prompting() {
        var prompts = new Rx.Subject();
        this.prompt(prompts);
        prompts.next({
            name: "appName",
            message: "Project name: ",
            type: "input",
            default: this.props.appName,
        });
        prompts.next({
            name: "apiName",
            message: "API name: ",
            type: "input",
            default: this.props.apiName,

        });
        this.listData = await GetInstances();
        prompts.next({

            name: "instanceName",
            type: "list",
            message: "Choose instance",
            choices: this.listData,

        });
        prompts.complete();
        this.answers = this.prompt(prompts).ui.process.subscribe(onEachAnswer, onError, onComplete);
    }
...

其他注意事项：await 的使用将在启动 Prompting 部分时启动对 GetInstances 的调用。但是，在GetInstances 返回之前，它不允许提出最后一个问题。

1: Yeoman uses Inquirer.js

2: Reactive Prompting in Inquirer.js

【讨论】：