能否在Svelte中结合onMount与#await辅助器使用？

Svelte官方教程提示：“建议将fetch放在onMount中而非<script>顶层，以适配服务端渲染(SSR)”

完全可以结合，核心思路是在组件里单独声明一个Promise变量，用onMount去触发fetch并把Promise赋值给这个变量，这样就能和#await配合了。具体实现看下面的代码示例：

完整代码示例 #

<script>
  import { onMount } from 'svelte';

  // 先声明一个Promise变量，初始为null
  let dataPromise = null;

  onMount(() => {
    // 在组件挂载后执行fetch，把返回的Promise赋值给dataPromise
    dataPromise = fetch('https://api.example.com/data')
      .then(response => response.json());
  });
</script>

<!-- 用#await处理这个Promise变量 -->
{#await dataPromise}
  <p>加载中...</p>
{:then fetchedData}
  <div>
    <h3>{fetchedData.title}</h3>
    <p>{fetchedData.description}</p>
  </div>
{:catch err}
  <p>加载出错了：{err.message}</p>
{/await}

原理说明 #

• onMount本身确实不返回Promise，但我们不需要它返回——只要在onMount内部把fetch的Promise赋值给组件内的响应式变量，#await就能自动追踪这个Promise的状态变化。
• 组件初始化时dataPromise是null，#await会先显示“加载中”；等onMount执行完、Promise赋值后，#await就会根据Promise的成功/失败状态渲染对应的内容。
• 哪怕你不需要SSR，这种写法也完全能用，既符合教程里的代码组织建议，又能享受到#await带来的便捷状态处理。

内容的提问来源于stack exchange，提问作者Dzmitry Lazerka