Svelte子组件如何规避window.fetch？能否配置类+page.ts的加载逻辑？

• 子组件不能单独定义+page.ts文件
  +page.ts是Svelte Kit路由页面专属的逻辑文件，只有路由目录下的+page.svelte页面组件才能对应搭配+page.ts编写服务端/客户端预加载逻辑，普通子组件没有这个机制。

• 解决控制台提示的两种可行方案：

  1. 统一在根页面的+page.ts中获取数据，通过props传给子组件
     在根路由的+page.ts里利用load函数提供的fetch接口获取所有子组件需要的数据，再将数据作为props传递给子组件，这样既符合Svelte Kit的最佳实践，也能消除控制台警告。
     示例代码：

     // 根目录/+page.ts
     export async function load({ fetch }) {
       const res = await fetch('/api/latest-books');
       const latestBooks = await res.json();
       return { latestBooks };
     }
     

     // 根目录/+page.svelte
     <script lang="ts">
       export let data;
     </script>
     
     <LatestBook books={data.latestBooks} />
     

     // LatestBook子组件
     <script lang="ts">
       export let books;
     </script>
     
     <!-- 使用books数据渲染内容 -->
     

  2. 子组件内使用$fetch替代window.fetch
     如果子组件需要独立完成数据获取，可以从@sveltejs/kit导入$fetch，它会自动适配服务端和客户端环境，并且遵循Svelte Kit的fetch规则，不会触发控制台的警告提示。
     示例代码：

     <script lang="ts">
       import { $fetch } from '@sveltejs/kit';
       let books;
     
       async function loadBooks() {
         books = await $fetch('/api/latest-books');
       }
     
       loadBooks();
     </script>
     
     <!-- 渲染获取到的books数据 -->
     

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