Skip to main content

SvelteKit cho phép bạn tạo ra không chỉ các trang mà còn các API route bằng cách thêm một tệp +server.js và xuất các hàm tương ứng với các phương thức HTTP: GET, PUT, POST, PATCH và DELETE.

Khi bạn nhấp vào nút thì ứng dụng này sẽ lấy dữ liệu từ một đường dẫn API /roll . Tạo đường dẫn đó bằng cách thêm một tệp 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'
		}
	});
}

Bây giờ, khi bạn nhấp vào cái nút, nó sẽ hoạt động.

Request handlers (Bộ xử lý yêu cầu) phải trả về một đối tượng Response. Vì thường xuyên trả về JSON từ một API route (đường dẫn API), nên SvelteKit đã cung cấp một hàm thuận tiện để tạo ra những phản hồi này:

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

Tiếp theo: POST handlers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
	/** @type {number} */
	let number;
 
	async function roll() {
		const response = await fetch('/roll');
		number = await response.json();
	}
</script>
 
<button on:click={roll}>Tung súc sắc</button>
 
{#if number !== undefined}
	<p>Bạn đã tung được số {number}</p>
{/if}
initialising