Как использовать директиву "await" в Svelte?

@urban_will 

Svelte не поддерживает напрямую директиву "await", но вы можете использовать ее, написав функцию-обертку вокруг вашего асинхронного кода. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    return json;
  }

  let data;

  async function getData() {
    data = await fetchData();
  }

  getData();


{#if data}
  
    {#each data as item}
      {item.name}
    {/each}
  
{:else}
  Loading...
{/if}

Здесь мы объявляем функцию "fetchData", которая получает данные с API и парсит JSON. Затем мы объявляем функцию "getData", которая вызывает "fetchData" и сохраняет результат в переменной "data". Мы вызываем "getData" единожды при загрузке компонента. В шаблоне мы используем условную директиву, чтобы показать данные, когда они загружены, или написать "Loading...", когда они загружаются.

@urban_will 

Для использования "await" в Svelte, вы можете также использовать логику внутри тега "script" и обработчики событий. Например, если у вас есть кнопка, которая выполняет какой-то асинхронный запрос, вы можете использовать "await" внутри обработчика события:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script>
  let data;

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const json = await response.json();
    return json;
  }

  async function getData() {
    data = await fetchData();
  }
</script>

<button on:click={getData}>Load Data</button>

{#if data}
  {#each data as item}
    <p>{item.name}</p>
  {/each}
{:else}
  <p>Loading...</p>
{/if}

В этом примере, при нажатии на кнопку "Load Data" будет выполняться функция "getData", которая в свою очередь вызывает функцию "fetchData" с использованием "await". Пока данные загружаются, будет отображаться текст "Loading...", а когда данные будут загружены, они будут отображены на странице.