SvelteKit如何通过应用中转从Java Spring API取数并展示？

因为你的组件用于+layout.svelte，推测是SvelteKit项目。正确的中转方式是用SvelteKit服务器路由作为中间层，组件调用本地路由，由路由转发请求到Spring API，完全符合你要的用户组件 <-> Svelte应用 <-> API数据流。

1. 搭建服务器中转路由 #

在src/routes/api/proxy-spring/目录下创建+server.js（核心中转逻辑），负责和Spring API通信：

import { error } from '@sveltejs/kit';

// GET请求示例（根据你的Spring API调整方法、地址、请求头）
export async function GET() {
    try {
        // 替换成你的Spring API实际地址
        const springApiUrl = 'http://你的SpringAPI域名/接口路径';
        const response = await fetch(springApiUrl, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                // 如果Spring API需要认证，这里添加对应头，比如 Authorization: `Bearer ${token}`
            }
        });

        if (!response.ok) {
            throw new Error(`Spring API请求失败: ${response.status}`);
        }

        const data = await response.json();
        return new Response(JSON.stringify(data), {
            headers: { 'Content-Type': 'application/json' }
        });
    } catch (err) {
        console.error('中转请求出错:', err);
        throw error(500, '获取数据失败');
    }
}

// 如果需要POST请求，添加以下代码
export async function POST({ request }) {
    try {
        const requestData = await request.json();
        const springApiUrl = 'http://你的SpringAPI域名/接口路径';
        const response = await fetch(springApiUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(requestData)
        });

        if (!response.ok) {
            throw new Error(`Spring API请求失败: ${response.status}`);
        }

        const data = await response.json();
        return new Response(JSON.stringify(data), {
            headers: { 'Content-Type': 'application/json' }
        });
    } catch (err) {
        console.error('中转POST请求出错:', err);
        throw error(500, '提交数据失败');
    }
}

2. 在Test.svelte中调用中转路由 #

提供两种常用调用方式，按需选择：

方式1：组件内动态获取数据 #

适合需要触发重新获取的场景：

<script>
    import { onMount } from 'svelte';
    let data = undefined;
    let isLoading = true;
    let errorMsg = '';

    async function fetchData() {
        isLoading = true;
        try {
            const response = await fetch('/api/proxy-spring');
            if (!response.ok) {
                throw new Error(`请求失败: ${response.status}`);
            }
            data = await response.json();
            console.log('获取到的数据:', data);
        } catch (err) {
            errorMsg = err.message;
            console.error('组件获取数据出错:', err);
        } finally {
            isLoading = false;
        }
    }

    // 组件挂载时自动获取数据
    onMount(fetchData);
</script>

{#if isLoading}
    <p>加载中...</p>
{:else if errorMsg}
    <p class="error">{errorMsg}</p>
{:else if data}
    <div>
        <!-- 示例：渲染数组数据 -->
        {#each data as item}
            <p>{item.name}</p>
        {/each}
    </div>
{/if}

方式2：在Layout中预加载数据 #

适合布局初始化时就需要的全局数据：

1. 在src/routes/+layout.js中预加载数据：

export async function load({ fetch }) {
    try {
        const response = await fetch('/api/proxy-spring');
        if (!response.ok) {
            throw new Error(`请求失败: ${response.status}`);
        }
        const springData = await response.json();
        return { springData };
    } catch (err) {
        console.error('Layout加载数据出错:', err);
        return { springData: null, error: err.message };
    }
}

2. 在+layout.svelte中传递数据给Test组件：

<script>
    export let data;
</script>

<Test data={data.springData} />

3. Test.svelte接收并渲染数据：

<script>
    export let data;
</script>

{#if data}
    <pre>{JSON.stringify(data, null, 2)}</pre>
{:else}
    <p>暂无数据</p>
{/if}

3. 排查你之前的「变量undefined」问题 #

大概率是以下原因导致的：

• 中转路由路径/方法写错：比如请求的本地路由地址不对，或者路由没有正确返回Response对象
• 异步逻辑处理错误：组件里直接用const data = fetch(...)而没有加await，导致拿到的是Promise而非实际数据
• Spring API本身异常：比如跨域拦截、认证失败、返回非JSON格式数据，导致中转路由无法解析
• 错误未捕获：请求失败时没有处理异常，导致data一直处于初始的undefined状态

排查步骤：

1. 直接在浏览器访问/api/proxy-spring，确认是否能返回正确的JSON数据
2. 在中转路由的代码中添加console.log，查看是否成功请求到Spring API并拿到数据
3. 在组件的fetch逻辑中完善错误捕获，打印具体错误信息定位问题

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