Svelte — 2 способа асинхронной загрузки

Admin Svelte

Пример двух способов асинхронной загрузки на странице с реактивным фреймворком Svelte.

1. Используем блоки await и then

Получаем данные с бэкенда обычным способом, например:

let settings = getFetchOther('settings/get-user-timers/');

При выводе html ставим конструкции:

{#await settings}
{:then settings }
{/await}

Выглядит так:

<div class="table">
    <div class="body">
        {#await settings}
        {:then settings }
            {#each settings as setting}
                <div class="item">
                    <div class="cell title">{setting.title}</div>
                    <div class="cell percent">{setting.percent}</div>
                </div>
            {/each}
        {/await}
    </div>
</div>

2. Используем onMount

Загружаем с помощью модуля onMount в svelte

import {onMount} from "svelte";

let settings = [];

onMount(async () => {
    getFetchOther('settings/get-user-timers/').then(function (res) {
        settings = res
    });
});

И далее можно обойтись без await блока в html:

<div class="table">
    <div class="body">
        {#each settings as setting}
            <div class="item">
                <div class="cell title">{setting.title}</div>
                <div class="cell percent">{setting.percent}</div>
            </div>
        {/each}
    </div>
</div>

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — 2 способа асинхронной загрузки"