SvelteKit中如何用{#await}处理异步数据加载并显示加载动画？

不需要单独创建额外的异步API函数，有两种常用方案能实现加载动画效果：

方案1：客户端组件内异步获取数据（直接用{#await}） #

把数据获取逻辑从+page.server.ts移到页面组件里，这样就能用Svelte的{#await}块控制加载、成功、失败三种状态。

修改后的+page.svelte代码：

<script lang="ts">
    import type { PageData } from './$types';
    export let data: PageData;
    
    // 客户端异步拉取数据
    const fetchItems = async () => {
        const requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };
        const res = await fetch("databaseURL", requestOptions);
        return res.json();
    };
</script>

<div class="container">
    <article class="prose p-5">
        <h1>Title</h1>
        <h4>Some text</h4>
    </article>
    {#await fetchItems()}
        <div class="loading">加载中...</div> <!-- 替换成你的加载动画组件 -->
    {:then items}
        <DataComponent data={items}/>
    {:catch error}
        <div class="error">加载失败：{error.message}</div>
    {/await}
</div>

之后可以删除+page.server.ts，因为数据获取逻辑已经移到客户端了。

方案2：保留Server Load，利用页面加载状态 #

如果想保留Server Load的优势（比如SSR预取数据、避免跨域问题），可以用SvelteKit内置的$page store判断页面加载状态：

<script lang="ts">
    import type { PageData } from './$types';
    import { page } from '$app/stores';
    export let data: PageData;
</script>

<div class="container">
    <article class="prose p-5">
        <h1>Title</h1>
        <h4>Some text</h4>
    </article>
    {#if $page.isLoading}
        <div class="loading">加载中...</div>
    {:else}
        <DataComponent data={data.items}/>
    {/if}
</div>

这种方式下，页面会先渲染静态内容，同时显示加载状态，直到Server Load完成后自动替换为数据组件。

为什么不用单独建API？ #

两种方案都可以复用原有的数据库请求逻辑：方案1是客户端直接请求（注意如果数据库接口有跨域限制，可通过SvelteKit的+server.ts做代理，但这不属于额外创建业务API）；方案2保留服务器端请求，完全不需要额外API端点。

内容的提问来源于stack exchange，提问作者ThyR4n