如何将道具传递给 SvelteKit 端点

Question

我试图将 props 传递给 SvelteKit 端点异步函数，但没有成功。我正在使用商店传递 value，但由于我不明白的原因，当我尝试在函数中获取它时 value 未定义.

谁能看出我做错了什么，访问存储值或者是否有更好的方法将 value 传递给函数？谢谢！埃里克

index.svelte

<script lang="ts">
  
  import { sampleData } from "~/data/sample";

  async function handleClick() {
    $sampleData = {value: "Fancy"};
    const result = await (await fetch(`/apis/ping`)).json();
    console.log("result", result);
  }
</script>


<button on:click={handleClick}>Ping</button>

ping.ts

import { sampleData } from "~/data/sample";
import { get as getDoc } from "svelte/store";


export async function get(): Promise<{ body: any }> {

  const _sampleData = getDoc(sampleData);
  const value = _sampleData.value;
  console.log("value", value);  

  // const value = "Fancy";

  const result = await (
    await fetch(`https://my-server/app/ping?value=${value}`)
  ).json();

  console.log("result", result);

  return {
    body: result,
  };
}

Answer 1

存储不会在服务器和客户端之间共享，因此端点中的存储仍将是它的初始值（未定义 在您的情况下）

您必须将前端（在浏览器上执行的内容）和后端或端点（在服务器上执行的内容）视为完全独立的东西。

也就是说，您应该将参数与提取一起传递，无论是在正文中还是作为查询参数。

体内

// in the client
fetch('/apis/ping', {
  body: JSON.stringify({ value: "Fancy" }),
  headers: {
    'Content-Type': 'application/json'
  }
})

// in the endpoint
export async function get({ body }) {
  const sampleData = body;
}

作为查询参数

// in the client
fetch('/apis/ping/?value=Fancy')

// in the endpoint
export async function get({ query }) {
  const sampleData = query.get('value')
}

Answer 2

以下是最终对我有用的东西：

index.svelte

<script lang="ts">
  const value = "Fancy";
  async function handleClick() {
    let response = await(await fetch(`/apis/ping/?value=${value}`)).json();
    console.log("response", response);
  }
</script>


<button on:click={handleClick}>Ping</button>

ping.ts

export async function get({ query }) {
  const value = query.get("value");
  const result = await (await fetch(`https://my-server/app/ping?value=${value}`)).json();

  return {
    body: result,
  };
}

不确定为什么需要包装额外的等待并强制转换为 json

如何将道具传递给 SvelteKit 端点

How to pass props to a SvelteKit endpoint

endpoint

sveltekit