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}