Пример двух способов асинхронной загрузки на странице с реактивным фреймворком 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>
Задержка отрисовки графика
На примере отрисовки графиков для Svelte.
Предположим нам нужно дождаться данных по графику.
<script>
async function getDataChart3() {
postFetch('bugs/get-data-chart/', data.then((r) => {
fillChartDataset3(r);
});
}
{#await getDataChart3()}
{:then lineOptions}
<Chart data={data} colors={colors} bind:this={chartRef}
type="line"
height="350"
valuesOverPoints
lineOptions={lineOptions}
tooltipOptions={tooltipOptions}
/>
{/await}
</script>
async function getDataChart3() {
postFetch('bugs/get-data-chart/', data.then((r) => {
fillChartDataset3(r);
});
}
{#await getDataChart3()}
{:then lineOptions}
<Chart data={data} colors={colors} bind:this={chartRef}
type="line"
height="350"
valuesOverPoints
lineOptions={lineOptions}
tooltipOptions={tooltipOptions}
/>
{/await}
</script>
В then лучше указывать переменную, которая не влияет на генерацию графика. Тогда он полностью успеет прогрузиться. Учитывать, что переменная data должна полностью заполниться, поэтому завязывать async на получение данных, которые ложатся в data.
