Utilidad de suspenso

La utilidad suspense le permite renderizar contenido de forma diferida utilizando el método replace en las instancias de la plantilla mientras le permite manejar la carga y el estado de error.

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)

Estado de carga

Puede pasar un contenido de carga personalizado para renderizar mientras se realiza el trabajo asincrónico. El suspense tiene un indicador de carga predeterminado que puede no ser el que desea.

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

Estado de error

También puede proporcionar una función como tercer argumento para controlar cómo desea mostrar los errores. El suspense tiene una forma predeterminada que puede no ser la que desea.

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

editar este documento