SvelteのAwait blocksを使ってみる

はじめに

Web APIでデータを取得する際にfetch APIだけを使っていたのですが、
.thenが何回も出て見通しが悪くなったので、async/awaitとSvelteのAwaite blocksで見通しをよくする。

元のコード

<script>
  let items;
	
  $: fetch('https:...')
    .then(res => res.json())
    .then(data => {
      items = data;
    });
</script>

{#if items}
  {#each items as item}
    <p>{item.name}</p>

  {/each}
{:else}
  <p>ロード中</p>
{/if}

async/await Await blocks

<script>	
  const fetchItems = async function() {
    const items = await fetch('https:...');
    return await items.json();
  }
</script>

{#await fetchItems()}
  <p>ロード中</p>
{:then items}
  {#each items as item}
    <p>{item.name}</p>
  {/each}
{/await}

async/awaitの方が見易くていいですね。
それにAwait blocksに{:catch error}を使うとエラー時の分岐も簡単に使えるのでこっちを普段から使う方がよさそう。

参考記事

Logic / Await blocks • Svelte Tutorial