Sveltekit 不会拦截 handleFetch 挂钩中的 fetch 调用

Question

我最近handleFetch在 Sveltekit 中发现了这个钩子。现在我试图用它来拦截对我的后端的调用（用 Go 编写），但似乎不起作用（除非我错过了一些东西）。

文档内容如下：

此函数允许您修改（或替换）在服务器上运行的加载或操作函数内（或预渲染期间）发生的获取请求。

我有src\hooks.server.js：

/** @type {import('@sveltejs/kit').HandleFetch} */
export async function handleFetch({ request, fetch }) {
    console.log("HERE IN --------> HANDLE FETCH HOOK")

    return fetch(request);
}

正如您所看到的，我只是想通过在终端上打印消息来确保调用挂钩。

我有一个load函数src\routes\records\+page.server.js：

export async function load() {
    console.log("HERE IN LOAD")
    // const records = await getAllRecords(1, 10);
    const response = await fetch(`http://127.0.0.1:8080/api/v1/records?page=1&per_page=2`);
    const records = await response.json();
    console.log(await records);
    return records;
}

尽管我看到HERE IN LOAD消息和正在打印的响应，但我从未看到指示钩子被击中的消息。

我缺少什么？

谢谢

Answer 1

您需要使用作为 propfetch提供给函数的函数。load

export async function load({ fetch }) { // destructure `fetch` from the first argument
    console.log("HERE IN LOAD")
    // const records = await getAllRecords(1, 10);
    const response = await fetch(`http://127.0.0.1:8080/api/v1/records?page=1&per_page=2`);
    const records = await response.json();
    console.log(await records);
    return records;
}

您可以在此处阅读有关将哪些属性传递给load函数的更多信息。