Promise永远不会在Svelte API端点中求值



我用以下代码在Svelte中编写了一个API端点,它应该有助于从Prisma中获取许多对象。

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-objectobjects总是停留在promise中。我的代码中的问题在哪里?

谢谢。

get函数没有正确返回。你需要在return的'body'属性中返回数据:

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();
}

这里有一些获取api的例子:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch