解决Svelte模板中的承诺问题

学习如何在Svelte模板中使用承诺

诺言是我们在JavaScript中处理异步事件的一个很棒的工具。

最近在ES2017中引入的await 语法使得使用promises变得更加简单。

Svelte在模板中为我们提供了{#await} 语法，以便在模板级别直接使用承诺。

我们可以等待承诺的解决，并为承诺的各种状态定义不同的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