Skip to main content
Bases de Svelte
Introduction
Réactivité
Props
Logique
Évènements
Liaisons
Classes et styles
Actions
Transitions
Svelte avancé
Réactivité avancée
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
Routes d’API
$app/state
Erreurs et redirections
SvelteKit avancé
Hooks
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
Conclusion

L’objet event passé à handle est le même objet — une instance de RequestEvent — que celui passé aux routes d’API dans les fichiers +server.js, aux actions de formulaires dans les fichiers +page.server.js, et aux fonctions load dans les fichiers +page.server.js et +layout.server.js.

Il contient des propriétés et méthodes utiles, dont certaines que nous avons déjà rencontré :

  • cookies — l’API cookies
  • fetch — l’API Fetch standard, avec des supers pouvoirs
  • getClientAddress() — une fonction pour récupérer l’adresse IP du client
  • isDataRequesttrue si le navigateur demande des données pour une page pendant une navigation côté client, false si une page/route est requêtée directement
  • locals — un endroit pour mettre des données arbitraires
  • params — les paramètres de route
  • request — l’objet Request
  • route — un objet avec une propriété id représentant la route correspondante
  • setHeaders(...) — une fonction pour définir les en-têtes HTTP de la réponse
  • url — un objet URL représentant la requête courante

Un cas d’usage classique est l’ajout de données dans event.locals via handle afin que ces données soient lues dans les fonctions load à venir :

src/hooks.server
export async function handle({ event, resolve }) {
	event.locals.answer = 42;
	return await resolve(event);
}
src/routes/+page.server
export function load(event) {
	return {
		message: `la réponse est ${event.locals.answer}`
	};
}

Modifier cette page sur Github

précédent suivant
1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>{data.message}</h1>