本文旨在解决 SvelteKit 中 handleFetch hook 未能拦截 load 函数中 fetch 请求的问题。通过示例代码和详细解释，帮助开发者正确配置和使用 handleFetch hook，从而实现对服务器端 fetch 请求的修改和控制。
在 SvelteKit 中，handleFetch hook 允许开发者在服务器端修改或替换 fetch 请求，这对于添加认证信息、处理跨域问题或进行请求重定向非常有用。然而，有时开发者会发现 handleFetch hook 似乎没有生效，无法拦截到预期的 fetch 请求。本文将详细介绍如何正确使用 handleFetch hook，并解决常见的配置问题。
问题分析
一个常见的错误是在 load 函数中直接使用全局的 fetch 函数，而不是 SvelteKit 提供的 fetch 函数。handleFetch hook 只能拦截通过 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;
}在上面的代码中，load 函数接收一个对象作为参数，该对象包含 fetch 函数。通过解构赋值 { fetch }，我们可以获得 SvelteKit 提供的 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);
}注意事项
- 确保 handleFetch hook 定义在 src/hooks.server.js 文件中。
- handleFetch hook 只会在服务器端执行，因此只能拦截服务器端的 fetch 请求。
- handleFetch hook 的 fetch 参数是 SvelteKit 提供的，它与全局的 fetch 函数不同。
- load 函数中的 fetch 函数必须是从参数中解构出来的，而不是直接使用全局的 fetch 函数。
总结
通过正确使用 SvelteKit 提供的 fetch 函数，可以确保 handleFetch hook 能够成功拦截 load 函数中的 fetch 请求。这使得开发者能够灵活地修改和控制服务器端的 fetch 请求，从而实现各种高级功能。请务必理解 SvelteKit 提供的 fetch 函数与全局 fetch 函数的区别，并始终使用 SvelteKit 提供的 fetch 函数来发起服务器端请求。
