SvelteKit中如何定时调用第三方API并更新数据

首先明确：+page.ts里的load函数是页面初始化/路由切换时仅执行一次的逻辑，不管是服务端渲染还是客户端 hydration，它都不会持续运行，所以没法在load里实现定时更新数据的需求——定时更新必须放在客户端组件的生命周期逻辑里。

下面是两种常见的实现方案，根据你的场景选择：

方案一：单个组件内独立处理定时更新 #

适合仅当前组件需要这个定时更新数据的场景，结合load的初始数据，步骤如下：

1. 先用load获取初始数据，传给组件：

// src/routes/+page.ts
export async function load() {
  const res = await fetch('https://api.example.com/data');
  return { initialData: await res.json() };
}

2. 在组件中使用onMount（对应Vue的mounted）启动定时器，用onDestroy清理定时器，避免内存泄漏：

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  export let data; // 接收load传来的初始数据

  // 用响应式变量存储当前数据，初始值为load返回的内容
  let currentData = data.initialData;
  let intervalId: number;

  // 封装API调用逻辑
  async function fetchLatestData() {
    const res = await fetch('https://api.example.com/data');
    currentData = await res.json(); // 赋值触发Svelte响应式更新
  }

  onMount(() => {
    // 每5秒调用一次API
    intervalId = setInterval(fetchLatestData, 5000);
    // 可选：如果需要立刻刷新一次（比如初始数据可能过时），可以直接调用fetchLatestData()
  });

  // 组件销毁时清理定时器
  onDestroy(() => {
    clearInterval(intervalId);
  });
</script>

<div>
  <h2>实时数据</h2>
  <pre>{JSON.stringify(currentData, null, 2)}</pre>
</div>

Svelte的响应式逻辑很直接：只要给响应式变量（这里的currentData）赋值，DOM就会自动更新，不需要像Vue那样用ref或reactive包裹。

方案二：用Svelte Store共享定时更新数据 #

如果多个组件需要使用同一份实时更新的数据，推荐用Svelte的Store来管理，这样所有订阅该Store的组件都会自动同步数据：

1. 创建一个Store文件，封装数据获取和定时更新逻辑：

// src/lib/stores.ts
import { writable } from 'svelte/store';

// 创建可写Store，初始值为null
const dataStore = writable(null);

// 封装API调用
async function refreshData() {
  const res = await fetch('https://api.example.com/data');
  const newData = await res.json();
  dataStore.set(newData); // 更新Store值
}

// 初始化加载一次数据
refreshData();

// 设置定时更新，每5秒刷新一次
setInterval(refreshData, 5000);

export { dataStore };

2. 在任意组件中使用该Store：

<script lang="ts">
  import { dataStore } from '$lib/stores';
</script>

<div>
  <h2>共享实时数据</h2>
  <!-- 用$符号订阅Store，自动响应更新 -->
  <pre>{JSON.stringify($dataStore, null, 2)}</pre>
</div>

注意：如果希望定时器仅在有组件使用Store时才启动，可以把定时器逻辑移到组件的onMount中，避免不必要的API请求。

关键注意点 #

• load函数仅负责初始数据预加载，不能处理持续的客户端定时任务，它的执行时机是页面首次加载或路由切换时，不会在客户端后台持续运行。
• 所有客户端定时逻辑必须放在组件生命周期（onMount/onDestroy）或Store的客户端代码中，确保只在浏览器环境运行。
• 一定要清理定时器（clearInterval），否则组件销毁后定时器还会继续运行，导致内存泄漏。

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