Svelte API端点中Promise未被执行 页面始终卡在加载阶段

你的代码存在两处核心错误：

• 后端SvelteKit API端点返回格式不符合要求：SvelteKit的服务端API端点不能直接返回查询得到的对象数组，必须返回符合规范的响应结构，否则会触发服务端500错误，前端无法拿到正确数据。
• 前端fetch请求未解析响应内容：fetch方法返回的Promise resolve后得到的是Response实例，不是直接的接口返回数据，必须调用await response.json()解析后才能拿到实际的数组数据。同时fetch默认不会将HTTP 4xx/5xx错误判定为异常，需要手动判断response.ok状态抛出错误才能被{#await}的catch分支捕获。

后端接口代码（routes/api/[slug].json.ts） #

export async function get({ params }) {
    const { slug } = params
    const objects = await prisma[slug].findMany({})
    objects.forEach(function (object, index: number) {
        object.objectId = index
    })
    
    // SvelteKit 旧版本返回格式
    return {
        status: 200,
        body: objects
    }

    // 如果你使用的是支持标准Response的SvelteKit新版本，替换为以下写法
    /*
    return new Response(JSON.stringify(objects), {
        status: 200,
        headers: {
            'Content-Type': 'application/json'
        }
    })
    */
}

前端组件代码（Cardview.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 response = await fetch(url);
    // 手动抛出HTTP状态错误，触发catch分支
    if (!response.ok) {
      throw new Error(`接口请求失败，状态码：${response.status}`)
    }
    // 解析响应为JSON数据
    const objects = await response.json();
    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}

内容的提问来源于stack exchange，提问作者Willem Vanhulle