如何在 sveltekit 中重用 fetch 函数

Question

我有一个 sveltekit 页面正在运行，它让你指定一个兄弟页面 +page.ts，你可以在其中调用 load 方法来获取数据。但是，我想根据 +page.svelte 中的按钮或交叉点观察器进行分页。我是否必须重写要在 +page.svelte 中使用的函数？或者有没有一种方法可以在 page.ts 文件中使用它，然后使用来自 +page.svelte 的不同偏移量/等调用它？文档不显示此特定用例。

Answer 1

随着“无限滚动”

最初的答案是针对经典分页，见下文。

如果您想将新数据附加到现有数据，进行某种“无限滚动”设置，首先要做的是创建一个可以从中获取数据的 api 端点。例如像这样：

// file: /api/users/[[page]]/+server.js
import { json } from '@sveltejs/kit';
export async function GET({ params }) {
  // Get the requested page, or if not provided 0
  const page = params.page ?? 0;
  // For demo purposes
  const users = new Array(10).fill(0).map((_, index) => ({
    name: `User ${(page * 10) + index + 1}`
  }))
  // Return value
  return json(users)
};

现在您可以从客户端代码调用此 api 以获取更多代码，就像您使用任何其他 api 一样：

<!-- file: +page.svelte -->
<script lang="ts">
    export let data;
    let users = data.users;
    let page = data.page;
    function loadMore() {
      fetch(`/api/users/${++page}`)
        .then((res) => res.json())
        .then((res) => (users = [...users, ...res]));
    }
</script>

<ul>
    {#each users as user}
        <li>
            {user.name}
        </li>
    {/each}
</ul>
<button on:click={loadMore}>Load more</button>

剩下的就是获取第一页，这可以通过从加载函数调用相同的 api 来简单地完成：

// file: +page.js
function load({ url }) {
  const users = await fetch(url.origin + '/api/users').then(res => res.json());
  return {
    // initial page 0
    page: 0,
    users
  }
};

使用“经典”分页

这是对问题的误解的先前答案，但将其保留在这里以备不时之需。通过这种方法，您可以使用更“经典”的分页方式，您可以在许多地方看到类似 posts?index=0、posts?index=1 或 mysite/archives/page/1、mysite/archives/page/2 的网址。

这种方法的好处之一是用户可以轻松返回（“它在第 5 页的某处”）或链接到列表的特定部分。 （通过一些额外的工作，用链接替换按钮，它也可以工作没有客户端javascript)

您可以将 searchparams 与加载函数一起使用，假设您有一个 url /mysite/posts?index=0，您可以配置加载函数以从索引 0 获取 10 个帖子

export async function load({ url }) {
  const index = url.searchParams.get('index') ?? 0; // defaults to 0
  // other code goes here
  return {
    posts,
    index
  }
}

如果你有，第二部分就变得微不足道了，只需“导航”到具有下一个索引的页面：`

goto(`/posts?index=${data.index + 1}`)

SvelteKit 将看到它是同一个页面，执行匹配的load 并用新帖子填充data（这就是为什么我也返回索引，这样更容易）。虽然 url 发生了变化（使共享更容易），但没有真正的导航.您甚至可以使用实际链接更改 goto 以使整个解决方案无需 javascript 即可工作：

<a href="/posts?index={data.index - 1}">Previous</a>
<a href="/posts?index={data.index + 1}">Next</a>