Example of using fetch with await block in Svelte

ListExample.svelte

<script>
  $: rates = [];

  async function fetchData() {
    const res = await fetch("https://api.exchangeratesapi.io/latest");
    const data = await res.json();

    if (res.ok) {
      for (const [key, value] of Object.entries(data.rates)) {
          rates.push({currency: key, value: value});
      }

      return data;
    } else {
      throw new Error(data);
    }
  }  
</script>

<style>
  ul {
    list-style: none;
  }

  li {
    border: 1px solid black;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>

<main>
  {#await fetchData()}
    <p>...waiting</p>
  {:then data}
    <h3>Base currency: {data.base}</h3>
    <ul>
      {#each rates as rate, i}
        <li>
          <div>{rate.currency}</div>
          <div>{rate.value}</div>
        </li>
      {/each}
    </ul>
  {:catch error}
    <p style="color: red">{error.message}</p>
  {/await}
</main>