SvelteKit中无法通过fetch从API获取数据是什么原因？

• load 函数使用位置错误：SvelteKit 的 load 是框架专属的路由钩子，仅在路由层文件（如 +page.js/+page.server.js/+layout.js 等）中定义时才会被自动调用，你写在普通组件 Items.svelte 里的 load 函数不会被执行，fetch 请求根本没有触发。
• 组件没有声明接收props：Items.svelte 中的 items 是局部变量，没有声明为可外部传入的prop，就算有数据也无法正常接收渲染。
• API路径不规范：相对路径 ../r/api/items/all 在不同路由页面下访问时会出现解析错误，容易出现404。

1. 迁移数据获取逻辑到路由load文件
   以首页路由为例，创建 src/routes/+page.js 文件，写入以下内容：

import { error } from '@sveltejs/kit';

export async function load({ fetch }) {
  // 替换为和你的API路由匹配的绝对路径，标准SvelteKit API路由存放在src/routes/api/xxx下
  const url = "/api/items/all";
  const res = await fetch(url);

  if (res.ok) {
    return {
      items: await res.json()
    };
  }
  throw error(res.status, "数据获取失败");
}

2. 修改对应路由的页面组件接收数据
   修改 src/routes/+page.svelte 文件，接收load返回的数据并传递给Items组件：

<script>
  import Items from '$lib/Items.svelte';
  // SvelteKit会自动将load返回的内容注入为页面组件的data属性
  export let data;
</script>

<Items items={data.items} />

3. 简化Items组件仅做渲染逻辑
   修改 $lib/Items.svelte 如下，删除无效的load逻辑，声明items为prop：

<script>
  // 声明为prop，接收父组件传入的列表数据
  export let items = [];
</script>

{#each items as item}
  <header>
    <h2>{item.title}</h2>
    <p>{item.body}</p>
  </header>
{/each}

• 确认你的API路由配置正确，比如获取所有items的接口对应文件路径为 src/routes/api/items/all/+server.js，且正确实现了GET请求处理逻辑。
• 如果请求的是外部第三方API，服务端load（+page.server.js）中发起fetch不会有跨域问题，客户端发起请求需要后端配置CORS规则。

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