怎样使用 Svelte 中的异步块

正文

因为异步请求的处理逻辑大多相似：请求时 pending、成功请求时展示数据、请求失败时展示异常，所以 Svelte 贴心地在模板中添加了这一模式，方便我们去做处理。

<script>
  import AppBackup from "./AppBackup.svelte";
  let promise = null; // 异步块需要的 Promise 对象

  // 模拟异步请求
  const getRandomNumber = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const randomNum = Math.round(Math.random() * 100);
        if (randomNum > 50) {
          resolve(randomNum);
        } else {
          reject(randomNum);
        }
      }, 1000);
    });
  };

  // 获取随机数字
  const clickHandler = () => {
    promise = getRandomNumber();
  };

  promise = getRandomNumber();
</script>

<div>
  <button on:click={clickHandler}>获取随机数字</button>

  {#await promise}
    <i>pending...</i>
  {:then number}
    <h1>{number}</h1>
  {:catch error}
    <p style="color: tomato;">{error}</p>
  {/await}
</div>

参考

• https://www.sveltejs.cn/tutorial/await-blocks