Depuis la version 5.36 de Svelte, vous pouvez le mot-clé `await` dans vos composants à trois
endroits où ce n'est pas possible précédemment :

- à la racine du `<script>` de votre composant
- dans des déclarations `$derived(...)`
- dans votre markup

Cette fonctionnalité est actuellement expérimentale, et vous devez l'activer en ajoutant l'option
`experimental.async` là où vous [configurez](/docs/kit/configuration) Svelte, en général
`svelte.config.js` :

```js
/// file: svelte.config.js
export default {
	compilerOptions: {
		experimental: {
			async: true
		}
	}
};
```

Le drapeau expérimental sera supprimé avec Svelte 6.

## Frontières [!VO]Boundaries

Actuellement, vous pouvez uniquement utiilser `await` au sein d'un balise
[`<svelte:boundary>`](svelte-boundary) ayant un snippet `pending` :

```svelte
<svelte:boundary>
	<MyApp />

	{#snippet pending()}
		<p>chargement...</p>
	{/snippet}
</svelte:boundary>
```

Cette restriction sera levée lorsque Svelte supportera le rendu côté serveur asynchrone (voir les
[mises en garde](#Caveats)).


> [!NOTE] Dans le [bac à sable](/playground), votre application est rendue au sein d'une frontière
> ayant un snippet `pending` vide, afin que vous puissez utiliser `await` sans avoir à en créer un.

## Mises à jour synchronisées [!VO]Synchronized updates

Lorsqu'une expression `await` dépend d'un morceau d'état particulier, les changements de cet état ne
seront pas reflétés dans l'interface avant que le travail asynchrone ne soit terminé, afin que
l'interface ne soit pas laissée dans un état inconsistant. En d'autres mots, dans un exemple comme
[celui-ci](/playground/untitled#H4sIAAAAAAAAE42QsWrDQBBEf2VZUkhYRE4gjSwJ0qVMkS6XYk9awcFpJe5Wdoy4fw-ycdykSPt2dpiZFYVGxgrf2PsJTlPwPWTcO-U-xwIH5zli9bminudNtwEsbl-v8_wYj-x1Y5Yi_8W7SZRFI1ZYxy64WVsjRj0rEDTwEJWUs6f8cKP2Tp8vVIxSPEsHwyKdukmA-j6jAmwO63Y1SidyCsIneA_T6CJn2ZBD00Jk_XAjT4tmQwEv-32eH6AsgYK6wXWOPPTs6Xy1CaxLECDYgb3kSUbq8p5aaifzorCt0RiUZbQcDIJ10ldH8gs3K6X2Xzqbro5zu1KCHaw2QQPrtclvwVSXc2sEC1T-Vqw0LJy-ClRy_uSkx2ogHzn9ADZ1CubKAQAA)...

```svelte
<script>
	let a = $state(1);
	let b = $state(2);

	async function add(a, b) {
		await new Promise((f) => setTimeout(f, 500)); // délai artificiel
		return a + b;
	}
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {await add(a, b)}</p>
```

... si vous incrémentez `a`, le contenu de `<p>` ne sera _pas_ immédiatement mis à jour et
n'affichera donc pas ceci —

```html
<p>2 + 2 = 3</p>
```

— mais à la place, le texte affichera `2 + 2 = 4` lorsque `add(a, b)` sera résolue.

Les mises à jour peuvent se superposer — une mise à jour rapide sera reflétée dans l'interface
tandis qu'une mise à jour lente sera toujours en cours.

## Concurrence [!VO]Concurrency

Svelte fera autant de travail asynchrone que possible en parallèle. Par exemple, si vous avez deux
expressions `await` dans votre markup...

```svelte
<p>{await one()}</p>
<p>{await two()}</p>
```

... les deux fonctions seront exécutées en mêmet temps, puisque ce sont des expressions
indépendantes, même si elles sont _visuellement_ séquentielles.

Ceci ne s'applique pas aux expressions `await` de votre `<script>` ou dans les fonctions asynchrones
— celles-ci s'exécutent comme tout autre code JavaScript asynchrone. Toutefois, il y a une
exception : les expressions `$derived` indépendantes seront mises à jour indépendamment, même si
elles sont exécutées séquentiellement lors de leur création :

```js
async function one() { return 1; }
async function two() { return 2; }
// ---cut---
// ces expressions sont exécutées séquentiellement la première fois
// mais seront mises à jour indépendamment
let a = $derived(await one());
let b = $derived(await two());
```

> [!NOTE] Si vous écrivez du code comme celui-là, attendez-vous à ce que Svelte vous affiche un
> avertissement [`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall)

## Indiquer les états de chargement [!VO]Indicating loading states

En plus du snippet [`pending`](svelte-boundary#Properties-pending) de la frontière la plus proche,
vous pouvez indiquer que du travail asynchrone est en cours avec la rune
[`$effect.pending()`]($effect#$effect.pending).

Vous pouvez aussi utiliser [`settled()`](svelte#settled) pour obtenir une promesse qui se résout
lorsque la mise à jour actuelle se termine :

```js
let color = 'red';
let answer = -1;
let updating = false;
// ---cut---
import { tick, settled } from 'svelte';

async function onclick() {
	updating = true;

	// sans ceci, le changement à `updating` sera groupé
	// avec les autres changements, signifiant qu'il ne sera
	// pas reflété dans l'interface
	await tick();

	color = 'octarine';
	answer = 42;

	await settled();

	// toute mise à jour affectée par `color` ou `answer`
	// a désormais été appliquée
	updating = false;
}
```

## Gestion des erreurs [!VO]Error handling

Les erreurs dans les expressions `await` vont remonter jusqu'à la [frontière
d'erreur](svelte-boundary) la plus proche.

## Mises en garde [!VO]Caveats

En tant que fonctionnalité expérimentale, les détails de comment les expressions `await` sont gérées
(ainsi que les APIs liées comme `$effect.pending()`) sont potentiellement sujettes à des breaking
changes en dehors d'un changement de version majeur, même si nous avons l'intention de limiter ces
changements au minimum.

Actuellement, le rendu côté serveur reste synchrone. Si une balise `<svelte:boundary>` ayant un
snippet `pending` est rencontrée lors du SSR, seul le snippet `pending` sera affiché.

## Breaking changes

Les effets sont exécutées dans un ordre légèrement différent lorsque l'option `experimental.async`
est à `true`.
Spécifiquement, les effets de _block_ comme `{#if ...}` et `{#each ...}` s'exécutent désormais avant
un `$effect.pre` ou un `beforeUpdate` du même composant, ce qui implique que dans de [très rares
situations](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=)
il est possible de mettre à jour un bloc qui ne devrait pas exister, mais uniquement si vous mettez
à jour un état au sein d'un effet, [ce que vous devriez éviter]($effect#When-not-to-use-$effect).