无法从 SvelteKit 中的 API 获取数据答案

【问题标题】：Can't fetch data from API in SvelteKit无法从 SvelteKit 中的 API 获取数据
【发布时间】：2022-03-24 22:12:50
【问题描述】：

我正在尝试通过从 API 获取来显示我请求的数据。除了 fetch 之外，一切都运行良好。

这是我的组件，名为Items.svelte：

<script>
  let items = [];

  async function load({ fetch }) {
    const url = "../r/api/items/all";
    let res = await fetch(url);

    if (res.ok) {
      return {
        props: {
          items: await res.json(),
        },
      };
    }
    return {
      status: res.status,
      error: new Error(),
    };
  }
</script>

{#each items as item}
  <header>
    <h2>{item.title}</h2>
    <p>{item.body}</p>
  </header>
{/each}

这是App.svelte：

<script>
  import Items from '$lib/Items.svelte';
</script>
    
<Items />

我做错了什么？

【问题讨论】：

标签： javascript fetch svelte sveltekit

【解决方案1】：

根据文档 ---> https://kit.svelte.dev/docs/loading

您缺少 context="module" 脚本部分。应该是：

<script context="module">
    export async function load({ fetch }) {
        let res = await fetch('../r/api/items/all');

        if (res.ok) {
            return {
                props: {
                    items: await res.json()
                }
            };
        }
        return {
            status: res.status,
            error: new Error()
        };
    }
</script>


<script>
    export let items = []
</script>    

{#each items as item}
    <header>
        <h2>{item?.title}</h2>
        <p>{item?.body}</p>
    </header>
{/each}

【讨论】：

是的，它可以工作，但前提是我直接在 App.svelte 中运行此代码。当我把它放在单独的组件中时，它就不起作用了。这就是问题所在。
DevTools 控制台有什么错误吗？
不。而且我在终端和 DevTools 控制台中没有看到对 db 的任何请求
奇怪 :) 你能把它上传到公共 github 仓库吗？我将在本地尝试并尝试提供帮助；）
这意味着它没有到达你自己的 json。一个技巧是使用 hooks.js（或 ts）并实现函数 handle({ request, resolve }) 来控制台记录请求和响应。这有助于准确了解幕后发生的事情

【解决方案2】：

在文档 (https://kit.svelte.dev/docs/loading) 中说：“定义页面或布局的组件可以导出在创建组件之前运行的加载函数。”

您不能使用来自组件的加载，只能来自页面或布局。

另见https://stackoverflow.com/a/67429568/1390405

【讨论】：