Svelte 5中不依赖onMount，如何优雅实现组件挂载时异步初始化？

你给出的自执行异步函数写法是可行的，但需要补充异步任务取消逻辑来避免内存泄漏，同时可以通过合理的结构解决TypeScript报错问题。以下是符合Svelte 5 runes规范的最优实现方案：

标准实现（带任务取消） #

<script>
  let data = null;
  let error = null;

  $effect(() => {
    // 创建AbortController用于取消异步请求
    const abortController = new AbortController();
    const { signal } = abortController;

    // 自执行异步函数处理数据获取与校验
    (async () => {
      try {
        const res = await fetch('/api/data', { signal });
        if (!res.ok) throw new Error(`请求失败: ${res.status}`);
        
        data = await res.json();
        // 在这里执行你的数据校验逻辑
        validateData(data);
      } catch (err) {
        // 忽略AbortError（组件卸载时主动取消的请求）
        if (err.name !== 'AbortError') {
          error = err.message;
          console.error('数据处理失败:', err);
        }
      }
    })();

    // 返回清理函数：组件卸载时取消异步任务
    return () => abortController.abort();
  });

  // 示例校验函数
  function validateData(data) {
    if (!data.id) throw new Error('数据格式错误');
  }
</script>

{#if error}
  <p class="error">{error}</p>
{:else if data}
  <!-- 渲染数据 -->
  <pre>{JSON.stringify(data, null, 2)}</pre>
{:else}
  <p>加载中...</p>
{/if}

关键说明 #

1. 为什么用自执行异步函数？
   $effect的回调函数不能直接是async函数（因为async函数返回Promise，而$effect期望返回清理函数或void），通过自执行异步函数可以避开这个限制，同时让异步逻辑正常执行。

2. 为什么需要AbortController？
   如果组件在异步请求完成前被卸载，未取消的请求会继续执行，可能导致内存泄漏或尝试更新已销毁组件的状态。返回的清理函数会在组件卸载时触发，主动终止请求。

3. TypeScript兼容处理
   上述写法完全符合TypeScript类型要求：$effect的回调返回的是一个无参数的清理函数，自执行异步函数的Promise不会被作为回调的返回值，因此不会触发类型报错。

简化版（无任务取消，不推荐生产环境） #

如果是简单场景且不需要处理组件卸载时的请求取消，可以简化为你最初的写法，但仍建议保留错误处理：

<script>
  let data = null;

  $effect(() => {
    (async () => {
      try {
        const res = await fetch('/api/data');
        data = await res.json();
      } catch (err) {
        console.error('数据获取失败:', err);
      }
    })();
  });
</script>

与原onMount的差异 #

Svelte 5的$effect默认执行时机与Svelte 4的onMount一致：都是在组件挂载到DOM后、首次渲染完成时执行，且仅执行一次（除非effect依赖的变量变化，但这里没有依赖，所以只跑一次）。

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