lit-html 中的异步事件处理程序

问题描述

有没有办法在 lit-html 中使用 async 事件处理程序？

我在提交表单以创建新用户时触发了这个提交事件，但我还想在添加新用户后重新加载用户列表。

    constructor(container: Element,state: app.state.DashboardState) {
        this.container = container;
        this.state = state;

        this.state.usersCreateState.changed = () => render(html`
            <form
                @submit="${e => this.submit(e)}"
                class="stack display:flex flex-grow:1">

为此，我需要先await usersCreate，然后才能刷新用户列表。

    async submit(e) {
        e.preventDefault();
        document.querySelector(":focus")?.dispatchEvent(new Event("blur"))
        await this.state.usersCreateState.create.submit()
        this.state.usersListState.list.submit()
    }

使 submit(e) 异步时，提交事件不再触发，这意味着 preventDefault 不会触发，相反，它会尝试 POST 到当前 URL，同时在控制台中转储此错误：

VM4535 user.ecff3a6d.js:20420 Uncaught ReferenceError: regeneratorRuntime is not defined
    at UsersCreate.submit (VM4535 user.ecff3a6d.js:20420)
    at HTMLFormElement.<anonymous> (VM4535 user.ecff3a6d.js:20408)
    at EventPart.handleEvent (VM4535 user.ecff3a6d.js:19355)
    at HTMLFormElement.EventPart.__boundHandleEvent (VM4535 user.ecff3a6d.js:19317)
submit @ VM4535 user.ecff3a6d.js:20420
(anonymous) @ VM4535 user.ecff3a6d.js:20408
handleEvent @ VM4535 user.ecff3a6d.js:19355
EventPart.__boundHandleEvent @ VM4535 user.ecff3a6d.js:19317

如果我删除 async 和 await，这个提交事件完美触发，除了 usersList 在 userCreate 完成之前或之后重新加载

...create.submit() / ...list.submit() 方法在 Kotlin 中定义

    @JsName("submit")
    fun submit(): Promise<ResultVO> {

生成包含 kotlin.js.Promise 的 TypeScript

submit(): kotlin.js.Promise<io.jvaas.state.vo.ResultVO>;

这只是一个普通的 JavaScript Promise：

https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.js/-promise/

有没有办法让 lit-html 正确使用异步事件处理程序？

或者，我可以只做一个回调，但 async / await 看起来好多了

    submit(e) {
        e.preventDefault();
        document.querySelector(":focus")?.dispatchEvent(new Event("blur"));
        this.state.usersCreateState.create.submit().then(() => {
            this.state.usersListState.list.submit();
        })
    }

解决方法

您的问题似乎与事件处理程序无关。看起来您正在编译为旧的 JS 语言版本——至少在 ES2017 之前添加了异步函数（async/await）——并且您没有加载运行转换后的异步函数所需的库（Regenerator Runtime）。>

您需要加载再生器：https://www.npmjs.com/package/regenerator-runtime

如果您使用 Babel 进行编译，此选项可能会有所帮助：https://babeljs.io/docs/en/babel-plugin-transform-runtime#regenerator-aliasing