SvelteKit 1.0如何每10秒更新JSON数据？旧版代码迁移

首先明确：onMount 和 onDestroy 并未被弃用，它们仍是Svelte核心API的一部分，在SvelteKit 1.0中可以正常使用。你之前的+page.js写法错误，是因为SvelteKit的+page.js属于加载模块，不能直接使用Svelte的生命周期函数，这些函数只能在.svelte组件文件中运行。

方案一：组件内独立实现定时拉取 #

直接在+page.svelte中完成初始加载和定时刷新逻辑，和旧版逻辑结构一致：

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

let listH = [];
let intervalId;

// 封装数据获取函数
async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
  listH = await response.json();
}

onMount(async () => {
  // 组件挂载后先拉取一次初始数据
  await fetchData();
  // 设置74秒定时刷新
  intervalId = setInterval(fetchData, 74000);
});

onDestroy(() => {
  // 组件销毁时清理定时器，避免内存泄漏
  if (intervalId) clearInterval(intervalId);
});
</script>

<pre>{JSON.stringify({ listH }, null, 2)}</pre>

方案二：结合加载函数做初始数据预获取 #

如果希望首屏数据能通过服务器端渲染加载，提升页面性能，可以用+page.js做初始数据拉取，组件内只负责定时刷新：

+page.js #

export async function load() {
  // 初始数据拉取，可在服务器端执行
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
  const listH = await response.json();
  return { listH };
}

+page.svelte #

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

// 接收加载函数传递的初始数据
export let data;
let listH = data.listH;
let intervalId;

async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
  listH = await response.json();
}

onMount(() => {
  // 组件挂载后启动定时刷新
  intervalId = setInterval(fetchData, 74000);
});

onDestroy(() => {
  if (intervalId) clearInterval(intervalId);
});
</script>

<pre>{JSON.stringify({ listH }, null, 2)}</pre>

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