Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

SvelteKit 不仅可以创建页面,还可以通过添加一个 +server.js 文件来创建 API 路由,该文件导出与 HTTP 方法对应的函数:GETPUTPOSTPATCHDELETE

当你点击按钮时,这个应用会从 /roll API 路由获取数据。通过添加一个 src/routes/roll/+server.js 文件来创建该路由:

src/routes/roll/+server
export function GET() {
	const number = Math.floor(Math.random() * 6) + 1;

	return new Response(number, {
		headers: {
			'Content-Type': 'application/json'
		}
	});
}

现在点击按钮可以正常工作了。

请求处理程序必须返回一个 Response 对象。由于从 API 路由返回 JSON 是很常见的,SvelteKit 提供了一个用于生成这些响应的便捷函数:

src/routes/roll/+server
import { json } from '@sveltejs/kit';

export function GET() {
	const number = Math.floor(Math.random() * 6) + 1;

	return new Response(number, {
		headers: {
			'Content-Type': 'application/json'
		}
	});
	return json(number);
}

在 GitHub 编辑此页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	/** @type {number} */
	let number = $state();
 
	async function roll() {
		const response = await fetch('/roll');
		number = await response.json();
	}
</script>
 
<button onclick={roll}>Roll the dice</button>
 
{#if number !== undefined}
	<p>You rolled a {number}</p>
{/if}