Svelte中load函数获取数据时，如何渲染等待状态或非依赖标记？

完全可以实现你想要的效果，核心是让+page.js返回未解析的Promise，配合+page.svelte的{#await}块来处理加载状态，具体步骤如下：

1. 调整+page.js代码 #

你的现有代码已经接近正确，但要确保不awaitfetchAllData的调用，这样返回的data是一个未完成的Promise，SvelteKit会立即渲染页面，同时在后台等待数据加载完成：

import { fetchAllData } from '$lib/utils';

export async function load({ fetch, url }) {
    const id = url.searchParams.get('id');
    // 直接返回Promise，不等待解析
    const data = fetchAllData(id, fetch);
    return { data };
}

注意：如果fetchAllData本身不是异步函数（不返回Promise），需要先将其改造为异步逻辑，否则无法用{#await}处理。

2. 在+page.svelte中实现加载状态 #

你的示例代码思路正确，还可以补充错误处理逻辑，同时提前渲染不依赖数据的内容：

<script>
    export let data;
</script>

<!-- 先渲染不需要等待数据的内容 -->
<header>
    <h1>数据详情页</h1>
    <nav>
        <a href="/">返回首页</a>
    </nav>
</header>

<!-- 根据Promise状态切换显示内容 -->
{#await data}
    <div class="loading">
        <p>正在获取数据，请稍候...</p>
        <!-- 可以添加加载动画 -->
    </div>
{:then d}
    <main>
        <!-- 渲染加载完成的数据 -->
        <p>数据内容：{JSON.stringify(d)}</p>
    </main>
{:catch err}
    <div class="error">
        <p>数据加载失败：{err.message}</p>
    </div>
{/await}

原理说明 #

当load函数返回包含Promise的对象时，SvelteKit不会阻塞页面渲染，而是先渲染页面中不依赖该Promise的部分，同时在后台等待Promise完成。页面中的{#await}块会自动监听Promise的状态变化，依次显示等待、成功、错误三种状态对应的内容。

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