Suspense 实用程序 - Markup by Before Semicolon

悬疑实用程序

suspense 实用程序允许您在模板实例中使用 replace 方法延迟渲染内容，同时处理加载和错误状态。

javascript
const loadTodos = async () => {
    const res = await fetch('/api/todos')

    if (!res.ok) {
        throw new Error(`${res.status}: ${res.statusText}`)
    }

    const { result } = await res.json()

    return result.map((item) => html`<li>${item.name}</li>`)
}

html`<ul>
    ${suspense(loadTodos)}
</ul>`.render(document.body)

加载状态

您可以在执行异步工作时传递自定义加载内容以进行渲染。 suspense 有一个默认的加载指示器，可能不是您想要的。

javascript
html`<ul>
    ${suspense(loadTodos, html`<loading-spinner></loading-spinner>`)}
</ul>`.render(document.body)

错误状态

您还可以提供一个函数作为第三个参数来处理您想要如何显示任何错误。 suspense 的默认方式可能不是您想要的。

javascript
html`<ul>
    ${suspense(
        loadTodos,
        html`<loading-spinner></loading-spinner>`,
        (error) => html`<error-display error="${error}"></error-display>`
    )}
</ul>`.render(document.body)

编辑本文档