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

（四）SvelteKit教程：调用 API

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

step 1:npm i json-serverstep 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 的数据