Svelte:如何等待组件渲染

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

  let data;

  async function fetchData() {
    // 模拟异步请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('数据已加载');
      }, 2000);
    });
  }

  const promise = fetchData();

  // 等待异步操作完成
  await promise.then((result) => {
    data = result;
  });
</script>

<main>
  {#if promise}
    <p>正在加载数据...</p>
  {:else}
    <p>{data}</p>
  {/if}
</main>

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

  let data;

  async function fetchData() {
    // 模拟异步请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('数据已加载');
      }, 2000);
    });
  }

  onMount(async () => {
    // 执行异步操作
    const result = await fetchData();
    // 更新组件状态
    data = result;
  });
</script>

<main>
  {#if data}
    <p>{data}</p>
  {:else}
    <p>正在加载数据...</p>
  {/if}
</main>