Skip to main content
SvelteKitDébuter avec SvelteKit

Standards du web

Tout au long de cette documentation, vous rencontrerez des références aux APIs standards du web sur lesquelles se base SvelteKit. Plutôt que de réinventer la roue, nous utilisons la plateforme, ce qui signifie que vos compétences actuelles en développement web sont applicables à SvelteKit. De même, le temps passé à apprendre SvelteKit vous aidera à devenir un•e meilleur•e 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 comme les Cloudflare Workers, Deno, et les Vercel Functions. Pendant votre développement, et au sein des adaptateurs pour environnements basés sur Node (AWS Lambda compris), ces APIs sont rendues disponibles via des polyfills lorsque nécessaires (pour le moment — Node met à jour rapidement son support des nouveaux standards du web).

En particulier, vous allez vous familiariser avec les concepts suivants :

APIs Fetch

SvelteKit utilise fetch pour récupérer des données depuis le réseau. Cette méthode est disponible dans les hooks et les routes de serveur ainsi que dans le navigateur.

Une version spéciale de fetch est disponible dans les fonctions load, les hooks de serveur, les routes d’API et les fonctions distantes pour invoquer les endpoints directement lors du rendu côté serveur, sans faire d’appel HTTP, tout en préservant les données d’authentification. (Pour faire des appels authentifiés dans du code serveur en dehors de load, vous devez passer explicitement cookie et/ou les headers d’authorization.) Cette méthode vous permet aussi de faire des requêtes relatives, alors que le fetch serveur classique requiert normalement une URL complète.

En plus de fetch lui-même, l’API Fetch inclut les interfaces suivantes :

Request

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

Response

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

Headers

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

src/routes/what-is-my-user-agent/+server
import { json } from '@sveltejs/kit';
/** @type {import('./$types').RequestHandler} */export function GET({ request }) {
	// affiche toutes les en-têtes	console.log(...request.headers);
	// crée une Response JSON en utilisant une en-tête reçue	return json({
		// récupère une en-tête précise		userAgent: request.headers.get('user-agent')
	}, {
		// définit une en-tête sur la réponse		headers: { 'x-custom-header': 'patate' }
	});
}
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = ({ request }) => {
	// affiche toutes les en-têtes	console.log(...request.headers);
	// crée une Response JSON en utilisant une en-tête reçue	return json({
		// récupère une en-tête précise		userAgent: request.headers.get('user-agent')
	}, {
		// définit une en-tête sur la réponse		headers: { 'x-custom-header': 'patate' }
	});
};

FormData

Lorsque vous avez affaire à des soumissions de formulaire natives (en HTML), vous devrez manipuler des objets FormData.

src/routes/hello/+server
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 la value d'un champ spécifique		name: body.get('name') ?? 'world'
	});
}
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 la value d'un champ spécifique		name: body.get('name') ?? 'world'
	});
};

APIs de stream

La plupart du temps, vos endpoints vont renvoyer des données complètes, comme dans l’exemple userAgent ci-dessus. Parfois, vous pourriez avoir besoin de renvoyer une réponse qui est trop grande pour être stockée en mémoire d’un envoi, ou qui doit être envoyée en morceaux ; pour ces situations, la plateforme fournit des streams — ReadableStream, WritableStream et TransformStream.

APIs d’URL

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

URLSearchParams

À chaque fois que vous rencontrez une URL, vous pouvez accéder aux paramètres de recherche via url.searchParams, qui est une instance de URLSearchParams :

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

Web Crypto

L’API Web Crypto API est rendu disponibles via la variable globale crypto. Elle est utilisée en interne pour les en-têtes de Content Security Policy, mais vous pouvez aussi vous en servir pour des choses comme la génération de UUIDs :

const uuid = crypto.randomUUID();

Modifier cette page sur Github llms.txt

précédent suivant
Structure d’un projet