如何将props传递给SvelteKit的端点函数

Question

我正在尝试向一个SvelteKit的异步终端函数（endpoint async function）传递props，但是一直没有成功。我使用了一个store来传递value，但是出于某些原因，当我在函数中尝试获取该值时，value是未定义的。

有人能看出我做错了什么吗，无论是访问存储值还是是否有更好的方法将value传递给该函数？谢谢！Eric

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,
  };
}

- JarvisWorks

Answer 1

服务器和客户端不共享存储，所以端点上的存储仍将保持其初始值（在您的情况下为未定义）。

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

也就是说，你应该将参数与fetch一起传递，可以作为body或queryparameters。

在body中

// 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')
}

- Stephane Vanraes

---

谢谢！这几乎让我完成了...不确定为什么，但我不得不在所有内容周围添加额外的awaits...完整解决方案如下 - JarvisWorks

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

- JarvisWorks

---

使用 await fetch().then(res => res.json()) 以避免双重等待。 - Stephane Vanraes