【Svelte】第十三节：HTTP 请求与 API 调用

最新推荐文章于 2025-07-17 20:56:13 发布

原创最新推荐文章于 2025-07-17 20:56:13 发布 · 1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#http #网络协议 #网络 #svelte #javascript #前端 #前端框架

前端教程同时被 2 个专栏收录

23 篇文章

订阅专栏

Svelte开发理论与实践

18 篇文章

订阅专栏

第13节：HTTP 请求与 API 调用

—— 掌握 SvelteKit 中的数据请求机制，实现前后端数据交互

👋 引言：连接前端与后端的桥梁 —— HTTP 数据请求

在现代 Web 应用中，前后端分离架构已成为主流。前端需要通过 HTTP 请求 从服务器获取或提交数据，如文章内容、用户信息、订单状态等。

SvelteKit 提供了强大的 服务端与客户端数据加载能力，支持：

在 +page.server.js 中使用 load() 函数预取数据（SSR/SSG）；
在客户端组件中使用 fetch() 发起请求；
使用 $app/stores 获取页面上下文；
配置 API 路由实现本地接口模拟；

本节课老曹将系统讲解如何在 SvelteKit 中进行 HTTP 请求和 API 调用，并通过实战练习构建一个支持远程数据获取的博客系统。

📚 课程目标

理解 SvelteKit 的数据加载流程与生命周期
掌握在服务端 (+page.server.js) 和客户端发起 HTTP 请求的方法
学会使用 fetch() 获取远程数据并渲染页面
能够创建本地 API 路由（+server.js）用于开发环境接口模拟
实战练习：构建一个支持远程数据加载的博客列表页与详情页

🧱 一、SvelteKit 数据加载机制概述

SvelteKit 提供了两种主要方式来加载数据：

方式	位置	特点
`load()` 函数	`+page.server.js` / `+layout.server.js`	支持 SSR/SSG，可访问数据库，返回值传递给客户端
`fetch()` 方法	客户端 `.svelte` 文件	客户端发起异步请求，适合 SPA 场景

✅ 示例：使用 `load()` 加载静态数据

// src/routes/blog/+page.server.js
export function load() {
  return {
    posts: [
      { slug: 'hello-world', title: '你好，世界' },
      { slug: 'my-journey', title: '我的旅程' }
    ]
  };
}

<!-- src/routes/blog/+page.svelte -->
<script>
  export let data;
</script>

<h2>文章列表</h2>
<ul>
  {#each $data.posts as post}
    <li><a href="/blog/{post.slug}">{post.title}</a></li>
  {/each}
</ul>

🔁 二、在服务端调用远程 API

✅ 示例：从远程 API 获取文章列表

// src/routes/blog/+page.server.js
export async function load({ fetch }) {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return { posts };
}

💡 注意：fetch 是封装后的函数，支持 SSR 并自动处理 CORS。

🔄 三、在客户端使用 `fetch()` 发起请求

当不需要 SSR 或希望按需加载时，可以直接在 .svelte 文件中使用 fetch()。

<!-- src/routes/blog/+page.svelte -->
<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';

  let posts = [];

  onMount(async () => {
    const res = await fetch('/api/posts');
    posts = await res.json();
  });
</script>

<h2>文章列表</h2>
<ul>
  {#each posts as post}
    <li><a href="/blog/{post.slug}">{post.title}</a></li>
  {/each}
</ul>

🧩 四、创建本地 API 路由（`+server.js`）

SvelteKit 允许你创建本地 API 接口，便于开发调试或构建全栈应用。

✅ 示例：创建 `/api/posts` 接口

// src/routes/api/posts/+server.js
import { json } from '@sveltejs/kit';

export async function GET() {
  const posts = [
    { slug: 'hello-world', title: '你好，世界' },
    { slug: 'my-journey', title: '我的旅程' }
  ];

  return json(posts);
}

现在你可以通过 /api/posts 获取 JSON 数据。

🧠 五、动态路由数据加载

✅ 示例：加载单篇文章内容

// src/routes/blog/[slug]/+page.server.js
export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  const post = await res.json();

  if (!post) {
    throw error(404, '文章未找到');
  }

  return { post };
}

<!-- src/routes/blog/[slug]/+page.svelte -->
<script>
  export let data;
</script>

<h1>{$data.post.title}</h1>
<p>{$data.post.content}</p>

💡 六、课堂实战练习

🎯 实战任务：构建一个完整的远程数据驱动博客系统

功能要求：

主页显示欢迎信息；
博客列表页从远程 API 获取文章列表；
博客详情页根据 slug 加载具体文章内容；
创建本地 /api/posts 接口用于开发环境数据模拟；
处理 404 错误情况；

示例代码：

`src/routes/api/posts/+server.js`

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

export async function GET() {
  const posts = [
    { slug: 'hello-world', title: '你好，世界', content: '这是第一篇文章' },
    { slug: 'my-journey', title: '我的旅程', content: '讲述我的开发之旅' }
  ];

  return json(posts);
}

`src/routes/blog/+page.server.js`

export async function load({ fetch }) {
  const res = await fetch('/api/posts');
  return { posts: await res.json() };
}

`src/routes/blog/+page.svelte`

<script>
  export let data;
</script>

<h2>文章列表</h2>
<ul>
  {#each $data.posts as post}
    <li><a href="/blog/{post.slug}">{post.title}</a></li>
  {/each}
</ul>

`src/routes/blog/[slug]/+page.server.js`

export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  const post = await res.json();

  if (!post) {
    throw error(404, '文章未找到');
  }

  return { post };
}

`src/routes/blog/[slug]/+page.svelte`

<script>
  export let data;
</script>

<h1>{$data.post.title}</h1>
<p>{$data.post.content}</p>

📝 七、总结

本节课我们系统掌握了：

SvelteKit 中的数据加载机制与生命周期
如何在服务端 (+page.server.js) 和客户端发起 HTTP 请求
使用 fetch() 获取远程数据并渲染页面
创建本地 API 路由（+server.js）用于开发环境接口模拟
实战构建了一个完整的远程数据驱动博客系统

这些知识是构建真实项目、实现前后端通信的核心技能。下一讲我们将进入 动画与过渡效果使用 svelte/animate 实现组件进入/离开动画 的学习，进一步提升svelte操作能力。

📘 附录资源推荐

SvelteKit 官方文档 - Load Function
SvelteKit 官方文档 - Server Routes
VSCode 插件推荐：
- Svelte for VS Code
- Prettier + ESLint 配合格式化与规范检查

🎯 课后作业

将 /api/posts 接口改为从远程 API 获取数据。
在博客详情页添加“上一篇 / 下一篇”导航按钮。
创建一个 /api/comments/[slug] 接口，模拟评论数据。

🤖 10大高频面试题（含答案）

✅ Q1: SvelteKit 中如何加载页面数据？

答：
使用 load() 函数定义在 +page.server.js 或 +layout.server.js 中，在服务端或客户端加载数据。

✅ Q2: load() 与 fetch() 的区别是什么？

答：

load()：用于服务端或客户端预加载，数据自动注入到页面；
fetch()：用于客户端手动发起请求，适用于 SPA 场景；

✅ Q3: 如何在服务端调用远程 API？

答：
在 +page.server.js 中使用封装的 fetch()：

const res = await fetch('https://api.example.com/data');
const data = await res.json();

✅ Q4: 如何创建本地 API 接口？

答：
创建 +server.js 文件，导出 GET, POST 等方法即可：

export function GET() {
  return json(data);
}

✅ Q5: 如何处理 API 请求错误？

答：
使用 try/catch 捕获异常，并抛出 error()：

if (!res.ok) throw error(500, '请求失败');

✅ Q6: 如何在客户端获取当前页面参数？

答：
使用 $page.params：

<script>
  import { page } from '$app/stores';
</script>

<p>当前文章 slug: {$page.params.slug}</p>

✅ Q7: 如何优化数据加载性能？

答：

使用 preloadData 提前加载目标页面数据；
使用 +page.server.js 实现 SSR 加速首屏；
对常用接口做缓存处理；

✅ Q8: 如何防止重复请求？

答：
可以使用响应式变量缓存结果，避免多次调用相同接口。

✅ Q9: 如何测试本地 API 接口？

答：
直接访问对应路径，如 /api/posts，浏览器会返回 JSON 数据。

✅ Q10: 如何区分服务端与客户端代码？

答：

+page.server.js 只运行在服务端；
.svelte 文件中的 onMount 只运行在客户端；

🎯 总结：
这些问题覆盖了 SvelteKit 的数据加载机制、HTTP 请求方式、API 接口创建、错误处理、性能优化等核心知识点，适合用于大家应对初级到中级前端岗位的面试准备。掌握这些内容将帮助你构建出具备完整数据交互能力的 Svelte 应用，并为进一步学习表单提交、状态持久化、部署上线等进阶技能打下坚实基础。