【Svelte】これは便利！マークアップの中でawaitが使える

概要

Svelteはマークアップの中でawaitを使うことができる。
Promiseが成功した場合と失敗した場合の出し分けはそのままマークアップ側で制御することができる。

何がいいのか

• ロジック側に非同期処理の成功、失敗を用意しておく必要がなくなるので、コードを簡潔にまとめることができる。

サンプルコード

https://svelte.dev/repl/062bb8ec024d4a058b81aba7ef824cfe?version=3.50.0
PokeAPIを利用してランダムにポケモンデータを取得する簡単な実装になっています。
非同期処理が完了するまでの期間は「...waiting」と表示されるので、マークアップ側でawaitを利用できていることが確認できます。

また、catchブロックを省略した書き方もできます。後ろの数行に記載させていただきました。

<script>
	async function getRandomNumber() {
		const randomNumber = Math.floor( Math.random() * 150 ) + 1
		const res = await fetch(`https://pokeapi.co/api/v2/pokemon/` + randomNumber);
		const json = await res.json();
		await sleep(1000) // 非同期処理をわかりやすくするための待ち時間
		return json
	}
	
	let promise = getRandomNumber();

	function handleClick() {
		promise = getRandomNumber();
	}
	function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
	}
</script>

<button on:click={handleClick}>
	Pokemon gettin'!
</button>

{#await promise}
	<p>...waiting</p>
{:then pokemon}
	<p>The pokemon is {pokemon.name}</p>
	<p><img src={pokemon.sprites.front_default}/></p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

catchブロックを省略して記載することもできる
{#await promise then pokemon}
	<p>The pokemon is {pokemon.name}</p>
	<p><img src={pokemon.sprites.front_default}/></p>
{/await}

まとめ

• Svelteではマークアップの中でawaitが使えるので、ロジックをスッキリさせることができる。
• catchブロックを省略して書くこともできる。