はじめに
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}を使うとエラー時の分岐も簡単に使えるのでこっちを普段から使う方がよさそう。
