在 Svelte 模板中解析 Promises

學習如何在 Svelte 模板中處理 Promises

Promises 是一種在 JavaScript 中處理異步事件的強大工具。

ES2017 中相對較新引入的 await 語法使得使用 Promises 更加簡單。

Svelte 在模板中提供了 {#await} 語法，以直接處理模板層級的 Promises。

我們可以等待 Promises 解析，並為 Promise 的各種狀態（未解析、已解析和被拒絕）定義不同的 UI。

這是它的工作原理。我們定義一個 Promise，然後使用 {#await} 區塊等待其解析。

一旦 Promise 解析完成，結果將傳遞給 {:then} 區塊：

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

{#await fetchImage}
 <p>...等待中</p>
{:then data}
 <img src={data.message} alt="狗圖片" />
{/await}

您可以通過添加 {:catch} 區塊來檢測 Promise 的拒絕：

{#await fetchImage}
 <p>...等待中</p>
{:then data}
 <img src={data.message} alt="狗圖片" />
{:catch error}
 <p>發生錯誤！</p>
{/await}

運行範例：https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941