SvelteKit客户端调用API遇fetch警告，求正确处理方式

问题回顾 #

你在+page.svelte中通过原生fetch调用内部API端点：

+page.svelte

<script>
async function get_card() {
        const url = '/api/card/?category=' + $page.params.slug;
        const response = await fetch(url, {
                method: 'GET',
            })
        const card = await response.json();
        return card;
    }
</script>

浏览器控制台收到警告：

Loading /api/card/?category=Neurology using `window.fetch`. 
For best results, use the `fetch` that is passed to your `load` 
function: https://kit.svelte.dev/docs/load#making-fetch-requests

你尝试从+layout.server.js的load中把服务端fetch传递到客户端，因函数不可序列化失败：

+layout.server.js

export const load = async ({ fetch, locals }) => {
    return {
      email: locals.user.email,
      group: locals.user.group,
      fetch: fetch
    }
}

错误原因分析 #

你传递fetch到客户端的操作确实有误：

• SvelteKit要求load函数返回的内容必须是可序列化的JSON类型（字符串、数字、对象、数组等），函数属于不可序列化的引用类型，所以必然失败。
• 服务端load中的fetch是SvelteKit提供的专属工具，仅用于服务端环境，它能自动处理内部API路径、共享Cookie、缓存等，但本身就不支持传到客户端使用。

可行解决办法 #

1. 预加载数据（推荐） #

如果卡片数据是页面初始化就需要的，直接在+page.server.js或+page.js的load函数中提前获取，把数据传给页面：

// +page.server.js
export const load = async ({ fetch, params }) => {
  const response = await fetch(`/api/card/?category=${params.slug}`);
  const card = await response.json();
  return { card };
}

然后在+page.svelte中直接使用预加载的数据：

<script>
  export let data;
  // 直接用 data.card 即可，无需再调用fetch
</script>

这种方式还能实现服务端渲染（SSR），提升页面加载速度，同时彻底消除警告。

2. 保留客户端fetch，忽略或关闭警告 #

如果请求是用户交互触发的（比如点击按钮后才获取卡片），用原生window.fetch完全没问题，这个警告只是SvelteKit的优化建议，不影响功能。
要是不想看到警告，可以在svelte.config.js中配置关闭：

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    hooks: {
      client: () => {
        if (typeof window !== 'undefined') {
          // 重写fetch，避免触发警告
          window.fetch = (...args) => globalThis.fetch(...args);
        }
      }
    }
  }
};

export default config;

也可以直接忽略警告，不影响代码运行。

3. 自定义客户端fetch封装 #

你可以自己封装一个客户端fetch函数，比如自动拼接API前缀，但其实原生window.fetch已经满足需求，没必要多此一举。

总结 #

你之前传递fetch到客户端的操作错误，因为函数无法序列化。如果是页面初始化所需数据，优先用load预加载；如果是交互触发的请求，继续用原生fetch即可，警告可忽略或关闭。

内容的提问来源于stack exchange，提问作者ejkreboot