SvelteテンプレートでPromiseを解決する

Svelteテンプレートでpromiseを操作する方法を学ぶ

Promiseは、JavaScriptで非同期イベントを処理するために自由に使える素晴らしいツールです。

の比較的最近の導入awaitpromiseを使用して作成されたES2017の構文はさらに単純です。

Svelteは私たちに{#await}テンプレートレベルでpromiseを直接操作するためのテンプレートの構文。

promiseが解決されるのを待ち、promiseのさまざまな状態(未解決、解決済み、および拒否)に対して異なるUIを定義できます。

仕組みは次のとおりです。約束を定義し、{#await}ブロックが解決するのを待ちます。

約束が解決されると、結果はに渡されます{:then}ブロック:

<script>
  const fetchImage = (async () => {
    const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
  })()
</script>

{#await fetchImage} <p>…waiting</p> {:then data} <img src={data.message} alt=“Dog image” /> {/await}

を追加することで、約束の拒否を検出できます{:catch}ブロック:

{#await fetchImage}
  <p>...waiting</p>
{:then data}
  <img src={data.message} alt="Dog image" />
{:catch error}
  <p>An error occurred!</p>
{/await}

例を実行します。https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941

私の無料ダウンロードSvelteハンドブック


より洗練されたチュートリアル: