本文旨在帮助开发者解决 SvelteKit 中 handleFetch hook 未能拦截 fetch 请求的问题。通过分析常见原因和提供正确的代码示例，确保 handleFetch 钩子能够按预期工作，从而实现对服务器端 fetch 请求的修改或替换。
在 SvelteKit 应用中，handleFetch 钩子是一个强大的工具，允许开发者在服务器端拦截和修改 fetch 请求。然而，有时开发者可能会遇到 handleFetch 未生效的情况。本文将深入探讨这个问题，并提供解决方案。
问题分析
最常见的原因是在 load 函数中使用了全局的 fetch 函数，而不是 SvelteKit 提供的 fetch 函数。handleFetch 钩子只能拦截通过 SvelteKit 提供的 fetch 函数发起的请求。
解决方案
要解决这个问题，需要在 load 函数中解构并使用 SvelteKit 提供的 fetch 函数。以下是修改后的代码示例：
// src/routes/records/+page.server.js
export async function load({ fetch }) { // 解构 `fetch`
console.log("HERE IN LOAD");
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 }; // 返回一个包含 records 的对象
}// src/hooks.server.js
/** @type {import('@sveltejs/kit').HandleFetch} */
export async function handleFetch({ request, fetch }) {
console.log("HERE IN --------> HANDLE FETCH HOOK");
const response = await fetch(request);
return response;
}代码解释：
- load({ fetch }): 在 load 函数的参数中，我们使用了对象解构的方式，将 SvelteKit 提供的 fetch 函数提取出来。
- await fetch(...): 使用解构得到的 fetch 函数发起请求。
- handleFetch({ request, fetch }): 在 handleFetch 钩子中，我们可以访问 request 对象，它包含了请求的所有信息，例如 URL、headers 等。如果需要修改请求，可以修改 request 对象或者使用 fetch 函数发起一个新的请求。
注意事项
- 确保 handleFetch 钩子位于 src/hooks.server.js 文件中。
- handleFetch 钩子只会在服务器端执行，不会在客户端执行。
- 如果 handleFetch 钩子没有生效，请检查控制台输出，查看是否有错误信息。
- load 函数必须返回一个对象，该对象的属性会被传递到组件中。
总结
通过使用 SvelteKit 提供的 fetch 函数，我们可以确保 handleFetch 钩子能够正确拦截和处理 fetch 请求。这为我们提供了更大的灵活性，可以对服务器端发起的请求进行自定义处理，例如添加身份验证信息、修改请求头等。记住，始终使用 SvelteKit 提供的 fetch 函数，避免使用全局的 fetch 函数。
