面试题：SvelteKit路由加载器中数据预取的基本实现方式

Question

在SvelteKit中，简述如何利用路由加载器进行数据预取，说明相关函数和文件结构，并举例一个简单场景下数据预取的代码实现。

Answer 1

利用路由加载器进行数据预取

1. 相关函数：在SvelteKit中，使用load函数来进行数据预取。load函数在服务器端运行（或在支持SSR的环境下运行），用于获取页面所需的数据。
2. 文件结构：load函数通常定义在路由相关的文件中。在SvelteKit项目中，路由是基于文件系统的，例如在src/routes目录下的每个文件或目录对应一个路由。对于页面级别的数据预取，load函数一般定义在页面组件（.svelte文件）的同一级目录下的+page.js文件中。

简单场景下数据预取的代码实现

假设我们有一个简单的博客应用，要在文章列表页面展示文章标题。

1. 文件结构
   • src/routes/articles/+page.js：

export async function load() {
    const response = await fetch('https://example.com/api/articles');
    const articles = await response.json();
    return {
        articles
    };
}

- `src/routes/articles/+page.svelte`：

<script context="module">
    export async function load() {
        const response = await fetch('https://example.com/api/articles');
        const articles = await response.json();
        return {
            articles
        };
    }
</script>

<script>
    export let data;
</script>

<ul>
    {#each data.articles as article}
        <li>{article.title}</li>
    {/each}
</ul>

在上述例子中，+page.js中的load函数通过fetch从API获取文章数据，然后返回的数据会通过data对象传递给+page.svelte组件，在组件中进行展示。