本文旨在帮助开发者解决 SvelteKit 中 handleFetch hook 未能拦截 fetch 请求的问题。通过分析常见原因和提供正确的代码示例，确保 handleFetch 能够按预期工作，从而实现对服务器端 fetch 请求的修改或替换。
SvelteKit handleFetch Hook 的作用
handleFetch hook 是 SvelteKit 提供的一个强大的工具，它允许开发者在服务器端（或预渲染期间）拦截并修改或替换 load 或 action 函数内部发起的 fetch 请求。这使得我们可以集中处理请求头、身份验证、请求重定向等逻辑，而无需在每个 load 或 action 函数中重复编写代码。
问题分析：handleFetch 未生效的常见原因
最常见的原因是在 load 函数中使用了全局的 fetch 函数，而不是 SvelteKit 提供的 fetch 函数。 SvelteKit 提供的 fetch 函数会触发 handleFetch hook，而全局的 fetch 函数则不会。
解决方案：使用 SvelteKit 提供的 fetch 函数
正确的做法是在 load 函数的参数中解构出 SvelteKit 提供的 fetch 函数，并使用它来发起请求。
// src/routes/records/+page.server.js
export async function load({ fetch }) { // 解构出 fetch
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;
}同时，确保 src/hooks.server.js 文件配置正确：
// 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);
}注意事项：
- handleFetch hook 只会拦截服务器端的 fetch 请求。客户端的 fetch 请求不会被拦截。
- 确保 handleFetch 函数返回一个 Response 对象，否则会导致错误。
- handleFetch hook 的执行顺序是按照 src/hooks.server.js 文件中的顺序执行的。
示例：修改请求头
以下示例展示了如何在 handleFetch hook 中修改请求头：
// src/hooks.server.js
/** @type {import('@sveltejs/kit').HandleFetch} */
export async function handleFetch({ request, fetch }) {
const newRequest = new Request(request.url, {
...request,
headers: {
...request.headers,
'Authorization': 'Bearer YOUR_API_KEY'
}
});
return fetch(newRequest);
}在这个示例中，我们创建了一个新的 Request 对象，并将 Authorization 请求头添加到原有的请求头中。
总结
handleFetch hook 是 SvelteKit 中一个非常有用的功能，可以帮助我们集中处理服务器端 fetch 请求的逻辑。确保使用 SvelteKit 提供的 fetch 函数，并正确配置 handleFetch 函数，才能充分利用其功能。通过本文的讲解，希望能够帮助开发者解决 handleFetch 未生效的问题，并更好地利用 SvelteKit 进行开发。
