我用以下代码在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