怎样使用 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>