如何向SvelteKit的load函数响应式传递参数？

问题根源 #

load 函数是页面初始化阶段（服务端或客户端首次加载）执行的，本身不具备响应式特性，无法直接监听 store 或组件内响应式变量的变化，因此直接在 load 里读取动态变化的curcity不会自动触发重新请求。

可行实现方案 #

方案1：将请求逻辑移到组件内，用响应式变量触发请求 #

把 API 请求从load函数移到组件脚本中，利用 Svelte 的响应式声明监听curcity变化，自动发起请求：

// 组件脚本部分
<script>
    import { writable } from 'svelte/store';

    // 若curcity是组件内响应式变量
    export let curcity = '';
    // 若curcity来自store：
    // const curcity = writable('');

    let suggestions = [];
    let debounceTimer;

    // 防抖+响应式处理：避免输入过程中频繁请求
    $: if (curcity.trim()) {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(async () => {
            const response = await fetch(
                `https://atlas.mapmyindia.com/api/places/geocode?address=${curcity}&bias=1&podFilter=city&itemCount=3`,
                { headers: { 'Authorization': `Bearer ********-****-****-****-**********` } }
            );
            const data = await response.json();
            suggestions = data;
            console.log(data);
        }, 300);
    }
</script>

方案2：通过路由参数触发load函数重新执行 #

如果curcity可以通过路由参数传递（比如/search?city=xxx），可在load函数中读取url参数，路由参数变化时 SvelteKit 会自动重新执行load：

export async function load({ fetch, url }) {
    const curcity = url.searchParams.get('city') || '';
    if (!curcity) return { suggestions: [] };

    const response = await fetch(
        `https://atlas.mapmyindia.com/api/places/geocode?address=${curcity}&bias=1&podFilter=city&itemCount=3`,
        { headers: { 'Authorization': `Bearer ********-****-****-****-**********` } }
    );
    const data = await response.json();
    return { suggestions: data };
}

组件内通过$page.data.suggestions获取结果，用户输入后用goto方法修改路由参数即可触发重新请求。

方案3：onMount结合store监听 #

若需保留部分初始化逻辑在load里，可在组件onMount中监听 store 变化，手动发起请求更新数据：

// load函数处理初始请求
export async function load({ fetch }) {
    const defaultCity = '';
    const response = await fetch(
        `https://atlas.mapmyindia.com/api/places/geocode?address=${defaultCity}&bias=1&podFilter=city&itemCount=3`,
        { headers: { 'Authorization': `Bearer ********-****-****-****-**********` } }
    );
    const data = await response.json();
    return { initialSuggestions: data };
}

// 组件脚本部分
<script>
    import { onMount } from 'svelte';
    import { curcityStore } from '$lib/stores';
    export let data;

    let suggestions = data.initialSuggestions;
    let debounceTimer;

    onMount(() => {
        const unsubscribe = curcityStore.subscribe(async (city) => {
            if (!city.trim()) return;
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(async () => {
                const response = await fetch(
                    `https://atlas.mapmyindia.com/api/places/geocode?address=${city}&bias=1&podFilter=city&itemCount=3`,
                    { headers: { 'Authorization': `Bearer ********-****-****-****-**********` } }
                );
                suggestions = await response.json();
            }, 300);
        });

        return unsubscribe;
    });
</script>

额外注意 #

• 对curcity做非空判断，避免无意义的空请求
• 添加防抖逻辑减少请求频率，提升性能
• 敏感密钥（如Authorization令牌）不要直接暴露在客户端代码中，可通过 SvelteKit API 路由转发请求，将密钥存放在环境变量中

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