Разрешайте обещания в шаблонах Svelte

Узнайте, как работать с обещаниями в шаблонах Svelte

Обещания - отличный инструмент для работы с асинхронными событиями в JavaScript.

Относительно недавнее введениеawaitсинтаксис в ES2017 сделан с помощью обещаний еще проще.

Svelte предоставляет нам{#await}синтаксис в шаблонах для прямой работы с обещаниями на уровне шаблона.

Мы можем дождаться разрешения обещаний и определить другой пользовательский интерфейс для различных состояний обещания: неразрешенного, разрешенного и отклоненного.

Вот как это работает. Мы определяем обещание и используем{#await}блок ждем его разрешения.

Как только обещание разрешается, результат передается в{:then}блокировать:

<script>
  const fetchImage = (async () => {
    const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
  })()
</script>

{#await fetchImage} <p>…waiting</p> {:then data} <img src={data.message} alt=“Dog image” /> {/await}

Вы можете обнаружить отклонение обещания, добавив{:catch}блокировать:

{#await fetchImage}
  <p>...waiting</p>
{:then data}
  <img src={data.message} alt="Dog image" />
{:catch error}
  <p>An error occurred!</p>
{/await}

Запустите пример:https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941

Скачать мою бесплатнуюСправочник Svelte


Более стройные уроки: