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>

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

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

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