从脚本调用终结点失败，类型错误[ERR_INVALID_URL]:URL无效

Question

我有这个脚本部分：

<script>
import Search from "$lib/search.svelte";
import ViewOptions from "$lib/views.svelte";
import { onMount } from "svelte";
let page;
let showData = {
shows: {},
loading: true,
};
export async function getData(page) {
const url = `/shows?page=${page}`;
console.log(url);
const res = await fetch(url);
const shows = await res.json();
showData = {
shows: shows,
loading: false,
};
}
onMount(async () => {
getData(page);
});

$: page, getData(page);
</script>

onMount运行良好。如果我试图使它成为被动的，也就是说每当页面变量发生变化时都调用该函数，我会在控制台中得到以下错误：

node:internal/errors:464
ErrorCaptureStackTrace(err);
^
TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:371:5)
at onParseError (node:internal/url:552:9)
at new URL (node:internal/url:628:5)
at new Request (file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:5907:16)
at file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:6189:19
at new Promise (<anonymous>)
at fetch (file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:6187:9)
at getData (/src/routes/index.svelte:23:21)
at eval (/src/routes/index.svelte:37:10)
at Object.$$render (/.../node_modules/svelte/internal/index.js:1745:22) {
input: '/shows?page=undefined',
code: 'ERR_INVALID_URL'
}

我不明白函数调用在onMount部分是否能完美工作，但在直接调用时却不能。看起来找不到端点。如果我从服务器(模块部分(调用它，我会理解，但很明显，我没有！

附言：我也尝试过$:getData(page(

Answer 1

SvelteKit提供了一个带有fetch包装器的load函数，可用于调用内部API。重新编译代码以使用它。你最终应该得到这样的东西：

<script context="module">
export async function load({ fetch }) {
const res = await fetch(`/shows?page=${page}`);
const shows = await res.json();
return {
props: { shows }
};
}
</script>

之后你可以做：

<script context="module">
/* Code above */
</script>
<script>
export let shows;
</script>

并且shows将被来自服务器的数据所补充。

Answer 2

这里的问题是，负载函数是在客户端和服务器上评估的。在你必须检查的反应语句中，如果它当前在浏览器上运行，如下所示：

$: {if (browser) {getData(page);}}