👩‍💻Svelte: обработка промисов с помощью {#await} и нюансы {#each} блоков

Доброго времени суток 👓

Посмею предположить, что нам, как фронтендерам, нередко доводится выводить в разметку какие-либо данные, будь-то список постов или пользователи в админ-панели, или что-либо еще, сценариев бесконечное множество. И в основном этот процесс в тех или иных технологиях сводится к тому, что мы создаем состояние для необходимых данных, потенциальных ошибок, условия для обработки ожидания, делаем запрос, все отлавливаем и обрабатываем... Как будто порой довольно много телодвижений, если речь идет про бытовую задачу без особых усложнений, нет?

Svelte же в свою очередь предлагает новую фичу: {#await} блоки, которые упрощают работу с этим сценарием. Предположим, нам нужно вывести список постов

🌟Для начала создадим функцию с запросом на сервер и вернем промис:

<script>
const getPosts = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
return res.json();
};
</script>

🌟И следом прибегаем к использованию того самого {#await} следующим образом:

{#await getPosts()}
<span>waiting...</span>
{:then data}
{#each data as post (post.id)}
<p>{post.title}</p>
{:else}
<span>nothing...</span>
{/each}
{:catch error}
<span>something went wrong {error}</span>
{/await}

🌟Как мы видим, обрабатываются все три состояния: pending в блоке await, fulfilled в then и rejected в catch, тем самым избавляя от излишних переменных, проверок и дополнительных конструкций

НО

📌При желании можно отказаться и от catch, а так же и от await, если в них нет нужды. Например:

{#await getPosts() then data}
{#each data as post (post.id)}
...
{/each}
{/await}

🌟Перейдем к циклу, который выводит данные, теперь не обязательно делать дополнительныю проверку на пустоту массива, ведь each имеет дополнительный блок else, в котором можно выводить все, что нужно, если массив окажется пустым или данные недостаточно корректными

💡Также в круглых скобках есть post.id, это так называемый ключ, если его указать, Svelte будет лучше отслеживать точечные изменения в данных и тем самым избегает лишние ререндеры, что может лучше сказываться на оптимизации, если сценарий предусматривает более динамичные манипуляции

#svelte