首页 > 其他 > 详细

怎样使用 Svelte 中的异步块

时间:2021-09-09 23:38:22      阅读:6      评论:0      收藏:0      [点我收藏+]

正文

因为异步请求的处理逻辑大多相似:请求时 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>

 

技术分享图片

参考

怎样使用 Svelte 中的异步块

原文:https://www.cnblogs.com/aisowe/p/15245514.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!