从脚本调用端点失败并出现 TypeError [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 部分完美运行，但直接调用时却不行。看起来它找不到端点。如果我从服务器（模块部分）调用它，我会理解，但显然，我不会！

P.S.: 我也试过 $: getData(page)

Answer 1

SvelteKit 提供了一个 load 函数和一个 fetch 包装器，您可以使用它来调用您的内部 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);}}

从脚本调用端点失败并出现 TypeError [ERR_INVALID_URL]：无效 URL

Calling Endpoint from script fails with TypeError [ERR_INVALID_URL]: Invalid URL

javascript

fetch-api

svelte

sveltekit