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}