nuxt3 fetch 文档
时间: 2023-11-03 10:06:35 浏览: 50
Nuxt.js 3 使用了内置的异步数据获取模块 fetch。它可以让你在客户端和服务端同时获取数据,并且还支持在路由级别和组件级别使用。
以下是 Nuxt.js 3 fetch 的文档:
## 在页面中使用
在页面组件中,你可以通过 `fetch` 属性定义需要获取的数据。例如:
```vue
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template>
<script>
export default {
async fetch() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
const post = await response.json()
return { post }
},
}
</script>
```
在上面的例子中,我们使用了 `fetch` 方法来获取 JSONPlaceholder API 中 ID 为 1 的帖子数据。
注意:如果你需要在服务端获取数据,你需要在 `fetch` 方法中使用 Node.js 的原生 HTTP 请求模块或者一个支持服务器端请求的 HTTP 客户端库。同时,请不要在客户端使用 `process` 对象或 `window` 对象的属性,因为这些对象在服务端是不可用的。
## 在布局中使用
你也可以在布局组件中使用 `fetch` 方法来获取数据。布局组件是会在每个页面中都被调用的组件,所以你可以在其中获取一些通用的数据,例如用户信息或者导航菜单等。例如:
```vue
<template>
<div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<nuxt />
</div>
</template>
<script>
export default {
async fetch() {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
const user = await response.json()
return { user }
},
}
</script>
```
在上面的例子中,我们在布局组件中获取了 JSONPlaceholder API 中 ID 为 1 的用户信息,并将其传递给了所有的页面组件。
## 在组件中使用
如果你需要在组件级别获取数据,你可以在组件的 `fetch` 方法中定义数据获取逻辑。例如:
```vue
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template>
<script>
export default {
async fetch() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${this.postId}`)
const post = await response.json()
return { post }
},
props: {
postId: {
type: Number,
required: true,
},
},
}
</script>
```
在上面的例子中,我们定义了一个 `postId` 属性来指定需要获取的帖子 ID。我们在 `fetch` 方法中使用组件的 `postId` 属性来构造请求 URL,并获取数据。注意,我们将获取的数据放在了组件的 `data` 属性中,这样就可以在模板中使用了。
## fetch 方法的参数
`fetch` 方法支持以下几个参数:
- `context`: 一个包含了许多有用属性的对象。例如 `context.app` 是当前应用程序的 Vue 实例,`context.route` 是当前路由信息等等。
- `params`: 一个包含了路由参数的对象。例如在 `/posts/:id` 的路由中,如果你访问了 `/posts/1`,则 `params` 对象会包含 `{ id: 1 }` 的键值对。
- `query`: 一个包含了查询参数的对象。例如在 `/search?q=nuxt` 的 URL 中,`query` 对象会包含 `{ q: 'nuxt' }` 的键值对。
```vue
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template>
<script>
export default {
async fetch({ params, query }) {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}?${new URLSearchParams(query)}`)
const post = await response.json()
return { post }
},
props: {
postId: {
type: Number,
required: true,
},
},
}
</script>
```
在上面的例子中,我们使用了 `params` 和 `query` 参数来构造请求 URL。我们使用了 `new URLSearchParams(query)` 来将查询参数对象转换成 URL 查询字符串。