SvelteKit では、ページ以外にも様々なものを作ることができます。+server.js ファイルを追加し、そこでHTTP メソッド GET、PUT、POST、PATCH、DELETE に対応する関数をエクスポートすることで、 API ルート(API routes) を作成することもできます。
このアプリは、ボタンをクリックしたときに /roll API ルートからデータを取得します。src/routes/roll/+server.js ファイルを追加し、そのルートを作成しましょう。
src/routes/roll/+server.js
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.js
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);
}