Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

SvelteKit 允许你创建的不仅仅是页面。我们还可以通过添加导出与 HTTP 方法对应的函数的 +server.js 文件来创建 API 路由:GETPUTPOSTPATCHDELETE

¥SvelteKit allows you to create more than just pages. We can also create API routes by adding a +server.js file that exports functions corresponding to HTTP methods: GET, PUT, POST, PATCH and DELETE.

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

¥This app fetches data from a /roll API route when you click the button. Create that route by adding a src/routes/roll/+server.js file:

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

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

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

¥Clicking the button now works.

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

¥Request handlers must return a Response object. Since it’s common to return JSON from an API route, SvelteKit provides a convenience function for generating these responses:

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);
}
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}