在 lit-html 中添加异步事件处理程序可以很方便地执行一些异步操作。但是，这也会导致一些问题，因为异步函数的返回值不会影响模板渲染。

为了解决这个问题，可以使用 lit-html 的 directive，即repeat、classMap、styleMap、live、guard等。

例如，使用 live directive可以使渲染函数等待 Promise 返回的值：

import {live} from 'lit-html/directives/live';

const handleClick = async (event) => { const result = await fetch('/data');

return result.json(); };

html Fetch Data;

这里的 live directive 会使用 requestRender，在 Promise 返回结果后重新渲染值。 这种方式可以避免渲染出不正确的值。

另外，还可以使用 asyncState directive，它会等待异步函数执行完成并返回结果。

import {asyncState} from 'lit-html/directives/async-state';

const handleClick = async (event) => { const result = await fetch('/data');

return result.json(); };

html ${(state) => html${state.data}} ;

在这个示例中，asyncState directive 会将 handleClick 函数返回的 Promise 转换为一个对象，其包含以下属性：‘data’（Promise 执行结果）、‘error’（如果 Promise 拒绝时返回），以及‘isLoading’（如果 Promise 还没有执行完成）。

通过在模板中使用(state) => html${state.data}``，可以将结果呈现为一个文本节点。