解决Svelte模板中的承诺

在Svelte模板中了解如何使用Promise

Promise是一个很棒的工具,可用于处理JavaScript中的异步事件。

相对较新的介绍awaitES2017中的语法使使用promise变得更加简单。

斯维尔特为我们提供了{#await}模板中的语法可直接与模板级别的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

免费下载我的苗条手册


更多精妙的教程: