在 Svelte API 端点中永远不会评估 Promise

Question

我在 Svelte 中使用以下代码编写了一个 API 端点，它应该有助于从基于 Prisma.io ORM 的数据库中获取大量对象。

API 端点位于 routes/api/[slug].json.ts 并包含一个 get 函数：

export async function get({ params }) {
    const { slug } = params
    const objects = await prisma[slug].findMany({})
    objects.forEach(function (object, index: number) {
        object.objectId = index
    })
    
    return objects
}

我的视图功能位于一个名为 Cardview.svelte 的 Svelte 文件中。它包含以下代码：

<script lang="ts">
  export let object_model: string;
  let title = toTitleCase(object_model);

  async function obtain_objects(object_model: string) {
    const url = 'http://localhost:3000/api/' + object_model + '.json';
    const objects = await fetch(url);
    return objects;
  }
  let objects = obtain_objects('measurement');
</script>

{#await objects}
  Reading from server... <Spinner size="sm" type="grow" />
{:then objects}
  <Container>
    {#each objects as v}
      <div class="shadow mb-5 bg-white rounded">
        <Varcard variable={v} />
      </div>
    {/each}
  </Container>
{:catch error}
  There was an error in loading the JSON {object_model}.
  <div><span>{error.message}</span></div>
{/await}

省略了从其他文件导入的一些布局。

这段代码的问题是let objects = .. 部分永远不会被{#await... 语法评估。这意味着，页面总是停留在加载阶段，并且 Javascript 对象 objects 总是停留在承诺中。我的代码哪里出了问题？

谢谢。

Answer 1

您的 get 函数未正确返回。您需要在退货的“正文”属性中返回您的数据：

return {
body: objects
}

使用 fetch 还需要一个额外的步骤：

async function obtain_objects(object_model: string) {
    const url = 'http://localhost:3000/api/' + object_model + '.json';
    const objects = await fetch(url);
    return objects.json();
  }

这里有 fetch api 的例子：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch