Пример двух способов асинхронной загрузки на странице с реактивным фреймворком Svelte.
1. Используем блоки await и then
Получаем данные с бэкенда обычным способом, например:
let settings = getFetchOther('settings/get-user-timers/');
При выводе html ставим конструкции:
{#await settings}
{:then settings }
{/await}
{: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>
<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
});
});
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>
<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>
