Svelte中如何监听year prop变化并触发fetch请求？

在Svelte中可以通过响应式语句结合浏览器环境判断来实现仅监听year变化并触发请求，同时避免SSR错误，具体实现如下：

<script>
import { browser } from 'svelte';
import Child from './Child.svelte';

export let year;
let data = [];
// 可选：添加加载状态和错误处理
let loading = false;
let error = null;

// 监听year变化，仅在浏览器环境执行请求
$: if (browser && year) {
  const fetchNewData = async () => {
    loading = true;
    error = null;
    try {
      data = await fetchData(year);
    } catch (err) {
      error = err.message;
    } finally {
      loading = false;
    }
  };
  fetchNewData();
}
</script>

{#if loading}
  <p>加载中...</p>
{:else if error}
  <p>请求出错：{error}</p>
{:else}
  {#each data as d}
    <Child {d} />
  {/each}
{/if}

关键说明 #

1. browser变量的作用：从svelte导入的browser会在SSR环境中返回false，浏览器环境返回true，这样可以避免SSR阶段执行fetch（SSR无法解析相对URL，会抛出错误）。
2. 响应式语句$:：该语句会自动监听year的变化，只要year更新且处于浏览器环境，就会重新执行请求逻辑，更新data后触发组件重新渲染列表。
3. 避免无限循环：这里直接在响应式语句中定义异步函数执行请求，不会像beforeUpdate那样因为修改data触发重复更新，因为响应式语句仅在year变化时才会触发。

为什么之前的方案不行 #

• onMount仅在组件首次挂载时执行一次，无法响应year的后续变化。
• beforeUpdate中修改data会触发组件更新，进而再次调用beforeUpdate，形成无限循环。
• 直接使用$: fetchData(year)会在SSR阶段执行fetch，由于SSR环境没有浏览器的URL上下文，相对URL请求会失败。

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