Utilitaire de suspense

L'utilitaire suspense vous permet de rendre le contenu paresseux en utilisant la méthode replace dans les instances de modèle tout en vous permettant de gérer l'état de chargement et d'erreur.

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)

État de chargement

Vous pouvez transmettre un contenu de chargement personnalisé à restituer pendant que le travail asynchrone est en cours d'exécution. Le suspense dispose d'un indicateur de chargement par défaut qui n'est peut-être pas celui que vous souhaitez.

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

État d'erreur

Vous pouvez également fournir une fonction comme troisième argument pour gérer la manière dont vous souhaitez afficher les erreurs. Le suspense a une méthode par défaut qui n'est peut-être pas celle que vous souhaitez.

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