SvelteKit 不仅可以创建页面,还可以通过添加一个 +server.js
文件来创建 API 路由,该文件导出与 HTTP 方法对应的函数:GET
、PUT
、POST
、PATCH
和 DELETE
。
当你点击按钮时,这个应用会从 /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);
}
上一页 下一页
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}