英文:
Sveltekit is not intercepting fetch call in handleFetch hook
问题
我最近发现了 Sveltekit 中的 handleFetch 钩子。现在我正在尝试使用它来拦截对我的后端（使用 Go 编写）的调用，但似乎不起作用（除非我漏了什么）。
文档中写道：
此函数允许您修改（或替换）在服务器上运行的 load 或 action 函数内发生的 fetch 请求（或在预渲染期间发生的请求）。
我在 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);
}
如您所见，我只是尝试通过在终端上打印消息来确保调用了钩子。
我在 src\routes\records\+page.server.js 中有一个 load 函数：
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 消息以及打印的响应，但我从未看到表明钩子被触发的消息。
我漏掉了什么？
谢谢。
英文:
I recently discovered the handleFetch hook in Sveltekit. Now I'm trying to use it to intercept calls to my backend (written in Go) but doesn't seem to work (unless I'm missing something).
The documentation reads:
> This function allows you to modify (or replace) a fetch request that happens inside a load or action function that runs on the server (or during pre-rendering).
I've got 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);
}
As you can see I'm just trying to make sure the hooks is called by printing a message on the terminal.
I've got a load function in 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;
}
Although I see the HERE IN LOAD message and the response being printed I never see the message that indicates that the hook was hit.
What am I missing?
Thanks
答案1
得分: 4
你需要使用提供给load函数的fetch函数作为一个属性。
export async function load({ fetch }) { // 从第一个参数中解构`fetch`
console.log("在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函数的属性的信息。
英文:
You need to use the fetch function that is provided to the load function as a prop.
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;
}
You can read more about which props are passed to load functions here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论