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

Пользователь

от urban_will , в категории: JavaScript , 6 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от magali , 4 месяца назад

@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...", когда они загружаются.