Svelte与Supabase中异步调用响应式实现方法咨询

问题根源 #

你直接在模板的{#await}中调用getData()，会导致组件每次渲染都重复执行请求，且返回的数据未绑定到响应式变量，无法触发模板自动更新；即便手动赋值给非响应式变量，也无法触发Svelte的响应式机制。

修正方案 #

将数据存储到响应式变量中，单独维护加载/错误状态，在组件挂载时执行数据请求：

1. 脚本部分（响应式变量+请求逻辑）

<script>
  import { onMount } from 'svelte';
  import supabase from './supabaseClient'; // 替换为你的Supabase客户端路径

  // 响应式变量：存储数据、加载状态、错误信息
  let projects = [];
  let loading = true;
  let error = null;

  async function getData() {
    try {
      const { data, error: fetchError } = await supabase.from('projects').select();
      if (fetchError) throw fetchError;
      projects = data; // 赋值给响应式变量，触发模板更新
    } catch (err) {
      error = err.message;
    } finally {
      loading = false; // 结束加载状态
    }
  }

  // 组件挂载时仅执行一次请求
  onMount(() => {
    getData();
  });
</script>

2. 模板部分（状态判断+遍历渲染）

{#if loading}
  <p>加载中...</p> <!-- 可替换为加载动画/占位UI -->
{:else if error}
  <p>加载失败：{error}</p>
{:else}
  {#each projects as project (project.id)}
    <!-- 你的项目内容渲染逻辑，示例： -->
    <div class="project-item">
      <h3>{project.title}</h3>
      <p>{project.description}</p>
    </div>
  {/each}
{/if}

进阶：实时数据同步（可选） #

如果需要监听Supabase数据库的实时变化，可添加订阅逻辑，自动更新数据：

onMount(() => {
  getData();
  
  // 订阅projects表的所有变更
  const subscription = supabase
    .from('projects')
    .on('*', () => getData()) // 数据变化时重新拉取
    .subscribe();

  // 组件销毁时取消订阅，避免内存泄漏
  return () => supabase.removeSubscription(subscription);
});

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