SvelteKit中如何复用fetch函数实现分页加载？

不用重写load里的逻辑，完全可以复用核心数据获取逻辑，具体步骤如下：

1. 抽离可复用的数据获取函数 #

把+page.ts里load方法中实际请求数据的核心逻辑抽成独立函数并导出，这样既能在load里用，也能在组件里调用：

// +page.ts
export async function load({ url }) {
  // 从URL参数读取偏移量，支持刷新页面保留分页状态
  const offset = Number(url.searchParams.get('offset')) || 0;
  const items = await getPaginatedItems(offset);
  return { items, offset };
}

// 导出可复用的分页数据获取函数
export async function getPaginatedItems(offset: number = 0) {
  // 这里替换成你的实际数据请求逻辑
  const res = await fetch(`/api/your-data-endpoint?offset=${offset}`);
  if (!res.ok) throw new Error('Failed to fetch data');
  return res.json();
}

2. 在+page.svelte中导入并调用 #

不管是按钮点击触发分页，还是用交叉观察器实现懒加载，直接导入上面的函数，传入新的偏移量即可：

<script lang="ts">
  import type { PageData } from './$types';
  import { getPaginatedItems } from './+page';

  export let data: PageData;
  let currentOffset = data.offset;
  let items = data.items;
  let isLoading = false;

  // 按钮触发加载下一页
  async function loadNextPage() {
    if (isLoading) return;
    isLoading = true;
    const nextOffset = currentOffset + 10; // 替换成你的每页条数
    const newItems = await getPaginatedItems(nextOffset);
    
    items = [...items, ...newItems];
    currentOffset = nextOffset;
    isLoading = false;

    // 可选：更新URL参数，让分页状态可分享/刷新
    history.pushState({}, '', `?offset=${nextOffset}`);
  }

  // 交叉观察器懒加载
  function intersectionObserver(node: Element) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        loadNextPage();
        observer.disconnect();
      }
    });
    observer.observe(node);
    return { destroy: () => observer.disconnect() };
  }
</script>

<!-- 渲染已有数据 -->
{#each items as item}
  <div>{item.content}</div>
{/each}

<!-- 加载按钮 -->
{#if !isLoading}
  <button on:click={loadNextPage}>加载更多</button>
{:else}
  <p>加载中...</p>
{/if}

<!-- 懒加载触发节点 -->
<div use:intersectionObserver style="height: 20px; width: 100%;"></div>

3. 额外提示 #

• 同步URL参数后，用户刷新页面会自动加载对应偏移量的数据，体验更完整
• 如果需要处理分页边界（比如没有更多数据），可以在getPaginatedItems里返回是否还有下一页的标识，前端根据这个隐藏加载按钮

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