{#await ...}

{#await expression}...{:then name}...{:catch name}...{/await}

{#await expression}...{:then name}...{/await}

{#await expression then name}...{/await}

{#await expression catch name}...{/await}

Блоки await позволяют разделять выполнение на три возможных состояния Promise — ожидающий (pending), выполненный (fulfilled) или отклонённый (rejected):

{#await promise}
  <!-- promise находится в состоянии ожидания -->
  <p>ожидание выполнения promise...</p>
{:then value}
  <!-- promise был выполнен или не является объектом Promise -->
  <p>Значение: {value}</p>
{:catch error}
  <!-- promise был отклонен -->
  <p>Произошла ошибка: {error.message}</p>
{/await}

Заметка

Во время серверного рендеринга будет отрисовываться только ветка ожидания (pending).

Если переданное выражение не является Promise, будет отрисовываться только ветка :then, включая серверный рендеринг.

Блок catch можно опустить, если вам не нужно ничего отрисовывать в случае отклонения promise (или если ошибка невозможна):

{#await promise}
  <!-- promise находится в состоянии ожидания -->
  <p>ожидание выполнения promise...</p>
{:then value}
  <!-- promise был выполнен -->
  <p>Значение: {value}</p>
{/await}

Если вам не важен статус ожидания, вы также можете опустить начальный блок:

{#await promise then value}
  <p>Значение: {value}</p>
{/await}

Аналогично, если вы хотите отображать только состояние ошибки, вы можете опустить блок then:

{#await promise catch error}
  <p>Произошла ошибка: {error}</p>
{/await}

Заметка

Вы можете использовать #await с import(...) для ленивой отрисовки компонентов:

{#await import('./Component.svelte') then { default: Component }}
  <Component />
{/await}