Standards du web

Tout au long de cette documentation, vous trouverez des références aux APIs Web standards sur lesquelles s'appuie SvelteKit. Plutôt que de réinventer la roue, SvelteKit utilise la plateforme, ce qui signifie que vos compétences en développement web sont utilisables avec SvelteKit. De même, le temps passé à apprendre SvelteKit vous aidera à progresser en tant que développeur ou développeuse web de manière générale.

Ces APIs sont disponibles dans tous les navigateurs modernes et dans de nombreux environnements hors navigateur, comme les "Cloudflare Workers", ou les "Edge Functions" de Deno et Vercel. Pendant le développement, et au sein des adaptateurs d'environnement Node (dont AWS Lambda), elles sont rendues disponibles via des polyfills lorsque nécessaire (en tout cas pour le moment — Node ajoute de plus en plus de standards web).

En particulier, vous deviendrez familier•e•s avec :

APIs Fetchpermalink

Svelte utilise fetch pour récupérer la donnée du réseau. Cette méthode est disponible dans les hooks et les routes serveur ainsi que dans le navigateur.

Une version spéciale de fetch est disponible dans les fonctions load, dans les hooks server, ainsi que dans les routes d'API serveur pour appeler des endpoints directement lors du rendu côté serveur, sans faire d'appel HTTP tout en préservant les identifiants. (Pour faire des appels identifiés dans du code serveur en dehors de load, vous devez explicitement passer des headers cookie et/ou authorization.) Elle vous permet également de faire des requêtes relatives, là où un fetch côté serveur vous impose normalement une URL complète.

En plus de fetch, l'API Fetch inclut les interfaces suivantes :

Requestpermalink

Une instance de Request est accessible dans les hooks et les routes serveur en tant que event.request. Elle contient des méthodes utiles comme request.json() et request.formData() pour récupérer la donnée envoyée au endpoint.

Responsepermalink

Une instance de Response est renvoyée de await fetch(...) et des fonctions des fichiers +server.js. Au fond, une application SvelteKit est une machine à tranformer une Request en Response.

Headerspermalink

L'interface Headers vous permet de lire les request.headers entrants et de définir des response.headers sortants. Par exemple, vous pouvez récupérer les request.headers comme montré ci-dessous, et utiliser la fonction utilitaire json pour envoyer des response.headers modifiés :

ts
import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
	// affiche tous les headers
	console.log(...request.headers);

	// crée une Response JSON en utilisant un header reçu
	return json({
		// récupère un header spécifique
		userAgent: request.headers.get('user-agent')
	}, {
		// définit un header sur la réponse
		headers: { 'x-custom-header': 'potato' }
	});
}

ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = ({ request }) => {
	// affiche tous les headers
	console.log(...request.headers);

	// crée une Response JSON en utilisant un header reçu
	return json(
		{
			// récupère un header spécifique
			userAgent: request.headers.get('user-agent'),
		},
		{
			// définit un header sur la réponse
			headers: { 'x-custom-header': 'potato' },
		},
	);
};

FormDatapermalink

Lorsque vous recevez des soumissions natives de formulaire HTML, vous avez affaire avec des objets FormData.

ts
import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export async function POST(event) {
	const body = await event.request.formData();

	// affiche tous les champs
	console.log([...body]);

	return json({
		// récupère une valeur spécifique
		name: body.get('name') ?? 'world'
	});
}

ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async (event) => {
	const body = await event.request.formData();

	// affiche tous les champs
	console.log([...body]);

	return json({
		// récupère une valeur spécifique
		name: body.get('name') ?? 'world',
	});
};

APIs de Streampermalink

La plupart du temps, vos endpoints vous renverront des données complètes, comme dans l'exemple userAgent ci-dessus. Parfois, vous pourriez avoir besoin de renvoyer une réponse trop lourde pour être envoyée en une seule fois, ou de renvoyer la donnée en morceaux, et pour cela la plateforme fournit des streams — ReadableStream, WritableStream et TransformStream.

APIs d'URLpermalink

Les URLs sont représentées par l'interface URL, qui inclut des propriétés utiles comme origin et pathname (et hash dans le navigateur). Cette interface est utilisée à différents endroits — event.url dans les hooks et les routes de serveur, $page.url dans les pages, from et to dans les fonctions beforeNavigate et afterNavigate et ainsi de suite.

URLSearchParamspermalink

Peu importe où vous rencontrez une URL, vous pouvez toujours accéder aux paramètres de recherche via url.searchParams, qui est une instance de URLSearchParams :

ts
const foo = url.searchParams.get('foo');

Web Cryptopermalink

L'API Web Crypto est rendue disponible via le module global crypto. Elle est utilisée en interne pour les headers de Content Security Policy, mais vous pouvez également vous en servir pour par exemple générer des identifiants UUID :

ts
const uuid = crypto.randomUUID();