SvelteKit：+page.js load() 函数在刷新页面后导致“500 内部错误”

Question

我尝试使用 +page.js 文件中的 load() 函数来获取数据，该函数在页面初始加载后工作正常。但是，如果我刷新页面（或更改代码并自动刷新），则会出现错误：“500 内部错误”。

我可以导航到页面上的另一条路线，然后返回此页面，它会再次工作。

+页面.js：

export async function load() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const books = await res.json();

    return {
        books
    }
}

+页面.svelte：

<script>
    export let data
    let id = parseInt(new URLSearchParams(window.location.search).get('id')) - 1
</script>

<h2>{data.books[id].title}</h2>
<p>{data.books[id].body}</p>

我究竟做错了什么？

Answer 1

您在初始化之前调用 window ，此代码在服务器端评估，在它不存在的上下文中。从 sveltekit导入browser辅助实用程序来处理这个问题，如下所示：

import { browser } from '$app/environment';
export let data;
let id = 0;
             
if (browser)
  id = parseInt(new URLSearchParams(window.location.search).get('id')) - 1