截至 Svelte 5.36，您可以在组件中三个之前不可用的位置使用`await`关键字：

*   在组件的最高级别中 `脚本`
*   内部 `$derived(...)` 声明
*   在您的标记内

此功能目前处于实验阶段，您必须通过添加 `experimental.async` 选项来启用，通常在您 [配置](/docs/kit/configuration) Svelte 时进行，通常在 `svelte.config.js` 中：

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

实验标志将在 Svelte 6 中移除。

## 
边界

当前，您只能在具有 `await` 的 [`<svelte:boundary>`](svelte-boundary) 内部使用一个 `pending` 片段：

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

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

此限制将在 Svelte 支持异步服务器端渲染后解除（见[注意事项](#Caveats)）。

> \[!注意\] 在[沙盒](/playground)中，您的应用在一个带有空挂起代码片段的边界内渲染，这样您就可以使用`await`而无需创建一个。

## 
同步更新

當一個`await`表達式依賴於特定的狀態時，該狀態的變化將不會在 UI 中反應，直到異步操作完成，這樣 UI 就不會處於不一致的狀態。換句話說，在像[這個](/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)); // artificial delay
		return a + b;
	}
</script>

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

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

...如果您增加`a`，则`<p>`的内容将*不会*立即更新为读取此内容—

`2 + 2 = 3`

— 相反，当 `add(a, b)` 解析时，文本将更新为 `2 + 2 = 4`。

更新可以重叠——快速更新将在用户界面中反映出来，而较早的慢速更新仍在进行中。

## 
并发

Svelte 会尽可能并行地执行异步操作。例如，如果你在标记中有两个`await`表达式...

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

...两个函数将同时运行，因为它们是独立的表达式，尽管它们在视觉上是连续的。

这不适用于您代码中的 `await` 表达式，也不适用于 `<script>` 内部或异步函数内部 — 这些运行方式与其他异步 JavaScript 一样。例外的是，独立的 `$derived` 表达式将独立更新，尽管它们在首次创建时将按顺序运行：

```js
async function one() { return 1; }
async function two() { return 2; }
// ---cut---
// these will run sequentially the first time,
// but will update independently
let a = $derived(await one());
let b = $derived(await two());
```

> \[注意\] 如果您编写如下代码，请期待 Svelte 给您一个[`await_waterfall`](runtime-warnings#Client-warnings-await_waterfall)警告

## 
指示加载状态

除了最近的边界[`待处理`](svelte-boundary#Properties-pending)片段外，您还可以使用[`$effect.pending()`]($effect#$effect.pending)来表示异步工作正在进行中。

您也可以使用[`settled()`](svelte#settled)来获取一个当当前更新完成时解决的承诺：

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

async function onclick() {
	updating = true;

	// without this, the change to `updating` will be
	// grouped with the other changes, meaning it
	// won't be reflected in the UI
	await tick();

	color = 'octarine';
	answer = 42;

	await settled();

	// any updates affected by `color` or `answer`
	// have now been applied
	updating = false;
}
```

## 
错误处理

错误在 `await` 表达式中会冒泡到最近的 [错误边界](svelte-boundary)。

## 
注意事项

作为一个实验性功能，如何处理 `await`（以及相关的 API 如`$effect.pending()`）的细节，以及这些变更是否会导致破坏性更改（尽管我们打算将此类变更控制在最小范围内），在非 semver 主版本发布之外，可能会发生变化。

当前，服务器端渲染是同步的。如果在 SSR 过程中遇到具有`<svelte:boundary>`和`pending`片段的，只有`pending`片段会被渲染。

## 
破坏性变更

效果在启用 `experimental.async` 选项时以略有不同的顺序运行。具体来说，像 *block* 效果如 `{#if ...}` 和 `{#each ...}` 现在会在同一组件中的 `$effect.pre` 或 `beforeUpdate` 之前运行，这意味着在 [非常罕见的情况下](/playground/untitled?#H4sIAAAAAAAAE22R3VLDIBCFX2WLvUhnTHsf0zre-Q7WmfwtFV2BgU1rJ5N3F0jaOuoVcPbw7VkYhK4_URTiGYkMnIyjDjLsFGO3EvdCKkIvipdB8NlGXxSCPt96snbtj0gctab2-J_eGs2oOWBE6VunLO_2es-EDKZ5x5ZhC0vPNWM2gHXGouNzAex6hHH1cPHil_Lsb95YT9VQX6KUAbS2DrNsBdsdDFHe8_XSYjH1SrhELTe3MLpsemajweiWVPuxHSbKNd-8eQTdE0EBf4OOaSg2hwNhhE_ABB_ulJzjj9FULvIcqgm5vnAqUB7wWFMfhuugQWkcAr8hVD-mq8D12kOep24J_IszToOXdveGDsuNnZwbJUNlXsKnhJdhUcTo42s41YpOSneikDV5HL8BktM6yRcCAAA=)，可能会更新一个本应不再存在的块，但仅当你在效果内部更新状态时，[这应该避免]($effect#When-not-to-use-$effect)。