SvelteKit 1.0后端表单Action返回空数据问题求助

核心问题：前端获取Action结果的方式错误 #

你当前用export let data来获取表单Action的返回值，但data仅对应页面load函数的返回结果，表单提交后Action的响应需要通过useActionData()钩子来获取。

后端代码的两处小问题 #

1. 模板字符串变量错误：prompt里的{topic}是字面量字符串，没有替换成实际变量，应该改为${topic}。
2. 返回结构冗余：内层doPost返回{success: result}，外层又把这个结果再包一层{success: result}，导致最终返回的是{success: {success: ...}}，结构多余。

修正后的代码 #

+page.server.js #

/** @type {import('./$types').Actions} */
export const actions = {
  default: async ({ request }) => {
    const form = await request.formData();
    const apikey = form.get('apikey');
    const topic = form.get('topic');

    console.log(apikey, topic);

    // 直接处理请求，无需嵌套async函数
    const res = await fetch('https://api.openai.com/v1/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${apikey}`
      },
      body: JSON.stringify({
        model: 'text-davinci-003',
        prompt: `Tell me something about ${topic}`, // 修正模板变量
        temperature: 0,
        max_tokens: 150
      })
    });

    if (!res.ok) {
      // 处理API请求失败的情况
      return { error: 'OpenAI API请求失败' };
    }

    const json = await res.json();
    // 直接返回解析后的JSON，无需再stringify
    return { success: json };
  }
};

+page.svelte #

<script>
  import { useActionData } from '$app/forms';
  
  // 使用useActionData获取表单Action的返回结果
  const actionData = useActionData();
  
  console.log(actionData);
</script>

<!-- 显示结果 -->
{#if actionData?.success}
  <pre>{JSON.stringify(actionData.success, null, 2)}</pre>
{:else if actionData?.error}
  <p style="color: red;">{actionData.error}</p>
{/if}

<!-- 表单部分（补充完整提交逻辑） -->
<form method="POST">
  <input type="text" name="apikey" placeholder="OpenAI API Key" required>
  <input type="text" name="topic" placeholder="Topic" required>
  <button type="submit">提交</button>
</form>

额外说明 #

• 提交表单后页面会重新加载，useActionData()会自动获取本次Action的返回值。
• 新增API请求失败的处理逻辑，避免前端无反馈。
• 无需对OpenAI返回的JSON做JSON.stringify，直接返回对象即可，前端可直接处理。

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