在 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
;
这里的 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.data}}
;
在这个示例中,asyncState directive 会将 handleClick 函数返回的 Promise 转换为一个对象,其包含以下属性:‘data’(Promise 执行结果)、‘error’(如果 Promise 拒绝时返回),以及‘isLoading’(如果 Promise 还没有执行完成)。
通过在模板中使用(state) => html
${state.data}``,可以将结果呈现为一个文本节点。