在加载函数中获取时使用 Sveltekit 加载程序

Question

我在 SvelteKit 中有一个加载函数。它获取一些数据。

有没有办法可以在加载函数解析之前显示加载程序？或者有一些 SSG 会在 SSR 解决后更新？任何可以让流程更加顺畅的方法，而不是无法向用户返回反馈......

<script context="module">
        export const async load = ({ fetch }) => {
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            return {
                data: await response.json()
            }
        }
</script>

<script>
        export let data;
</script>

<img src={data.message} alt="Dog image" />

我想要一个加载程序直到加载完成或一些默认数据值直到加载完成以获得更好的用户体验。我不想将其移至 onMount，因为我想在 SSR 上调用 api。

我正在寻找初始 CSR 的组合，直到 SSR 加载完成。我希望这也适用于初始加载，而不仅仅是在导航时。

Answer 1

当然，最简单的方法是您可以像文档中那样等待获取

https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941?version=3.46.4

<script>
    const fetchImage = (async () => {
        const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
    })()
</script>

{#await fetchImage}
    <p>...waiting</p>
{:then data}
    <img src={data.message} alt="Dog image" />
{:catch error}
    <p>An error occurred!</p>
{/await}

或者任何替代方案（例如分配反应变量）也应该有效