Yeoman生成器异步执行的最佳实践

Question

我正在创建一个Yeoman生成器，它目前运行良好，现在我需要添加一个列表来自异步调用（我希望它在后台运行），该调用可能需要大约2-3秒钟来检索数据，因此我将其放置在initializing中，因为用户将在第三个问题中得到这个问题。 （请参见下面的对象）因此，数据检索过程将开始以避免等待用户点击第3个问题时。基本上，我希望数据检索将在后台进程中完成。

我的问题是：

1. 它的异步使用是否处理正确？我的意思是在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

} 

- Beno Odr

---

我明白你的意思，但是你是通过http请求、服务或其他方式获取数据吗？如果是在初始化时获取下3个问题，那么它需要在后台运行，所以我无法理解整个流程。如果你能澄清一下这些问题，我会更愿意帮助你。 - Himanshu Bansal

@HimanshuBansal - 这个服务正在调用本地API（不是公共的...）假设它是一个函数，你正在调用一些需要大约3秒（或更多，网络...）的rest，数据应该在初始化时获取，因为我们不想浪费时间，但它应该在第三个问题“instanceName”准备好。你会怎么做？工作线程？instanceName需要访问这些数据。 - Beno Odr

@HimanshuBansal - 现在清楚了吗？ - Beno Odr

明白了...给我一点时间.. 我刚刚下班了...让我为您创建一个测试版本，这样您就可以验证它是否正常工作，好吗? - Himanshu Bansal

@HimanshuBansal - 当然没问题。 - Beno Odr

Answer 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使用Inquirer.js

2: Inquirer.js中的响应式提示

- Joshua Rose