（四）SvelteKit教程：调用外部 API 获取数据

（四）SvelteKit教程：调用 API

我们先按照如下的方式来构建api服务：

step 1:

npm i json-server


step 2:

在根目录下新建 db.json 文件，内部写入如下内容：

{

"users": [

{

"id": 1,

"name": "Alice",

"email": "alice@example.com"

},

{

"id": 2,

"name": "Bob",

"email": "bob@example.com"

}

]

}


step 3：

在 package.json 中添加如下命令：

"scripts": {

"serve-json": "json-server --watch db.json --port 4000",

...

}



step 4：
运行命令：npm run serve-json

至此，你可以通过 http://localhost:4000/users 来访问刚才创建的用户数据。

接下来，我们在 SvelteKit 项目中调用这个 API。

首先，我们在 /about 目录下面新建一个 +page.js 文件，内容如下：

export const load = async (loadEvent) => {

const { fetch} = loadEvent;

const title = "About Us Ming title";

const response = await fetch("http://localhost:4000/users");

const users = await response.json();

return {

title,

users,

};

};

至此，我们就可以在 /about 页面中使用 users 数据了。我们在 /about/+page.svelte 文件中使用如下代码：

<script>

export let data;

const users = data.users;

</script>


<div>

about page ming - {data.title}

<a href="/">Home page</a>



{#each users as user}

<p>{user.name}</p>



{/each}

</div>

这样，我们就完成了调用 API 的功能。

带参数的API

假设我们 /about 下面需要有带参数的 API，目录如下：

├── +layout.svelte
├── +page.svelte
├── about
│   └── [aboutID]
│       ├── +page.server.js
│       └── +page.svelte

比如我们需要访问 /about/1 那么如何将这个 1 传入到 API中，我们只需要修改 +page.server.js 就行，文件如下：

export const load = async (serverloadEvent) => {
    const { fetch, params, url, route} = serverloadEvent;
    console.log("About page load", params, url, route.id);
    const { aboutID } = params;
    const title = "New, from server";
    const response = await fetch(`http://localhost:4000/users/${aboutID}`);
    const users = await response.json();
    return { 
      title,
      users,
   };
  };
对应

对应的 +page.svelte 如下：

<script>
    export let data;
    const user = data.users;
</script>

user.name: {user.name}

{user.email}

这样我们就可以获取 /about/1 的数据