初始加载后如何在 SvelteKit 中获取端点数据？答案

【问题标题】：How to fetch endpoint data in SvelteKit after initial load?初始加载后如何在 SvelteKit 中获取端点数据？
【发布时间】：2022-12-21 19:37:09
【问题描述】：

我的 SvelteKit (1.0.0-next.572) 应用程序中有一个端点基于他们文档中的 random number example。如果我从 +page.svelte 中的那个端点获取数据：

<script lang="ts">
    let randomNumber = 0;
    async function random() {
        const response = await fetch('/api/random-number');
        randomNumber = await response.json();
    }
</script>

{randomNumber}

<button on:click={random}>random</button>

一切正常，但我在浏览器控制台中收到此警告：

使用 window.fetch 加载 /api/random-number。为获得最佳效果，请使用 fetch 传递给您的 load 函数： https://kit.svelte.dev/docs/load#making-fetch-requests

如果我将请求从 GET 更改为 POST，警告就会消失。我只是不认为这是一个 POST 请求。我明白数据应该加载到+page.ts或+page.server.ts，但是如何加载呢后响应用户事件时的初始请求？

这里的惯用方式是什么？我可以想象重新加载页面或使用表单操作，但这似乎不直观且麻烦。

更新：这似乎是一个错误/误报。请参阅答案中的讨论。现在有一个github issue。

【问题讨论】：

标签： svelte sveltekit

【解决方案1】：

如果你只有一个数据集可以使用load函数加载，你可以invalidate it让它在必要时重新加载。

对于其他用例，您可以在页面上使用fetch；使用 load 函数的主要优点是它可以在页面初始加载时在服务器端呈现。

【讨论】：

好的，但是我应该在使用 fetch 时忽略警告吗？
查看您的代码，它已仅在click 上执行；我很惊讶你收到这个警告。如果您在加载函数中使用 fetch 而没有引用作为参数一部分传递的 fetch，则应该会出现警告。
这是一个空的骨架项目，只有来自文档的端点和我在问题中提供的页面/组件。
所以你目前没有load函数但仍然收到警告？
那么这可能是误报/错误。警告周围的代码使用试探法来确定何时显示警告。可能值得报告一个完整的 repro，也许可以改进。