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