使用 $fetch 进行 HTTP 请求

avatar
cmdragon 渡劫
image image

扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长

在 Nuxt3 中,$fetch 是一个强大的工具,用于在 Vue 应用程序和 API 路由中进行 HTTP 请求。它基于 ofetch 库,并在 Nuxt
中提供了一些增强功能,如支持服务器端渲染(SSR)和自动缓存。

什么是 $fetch

$fetch 是 Nuxt3 中全局暴露的一个辅助函数,用于进行 HTTP 请求。它允许您在 Vue 组件和 API 路由中轻松地发送 GET、POST
等请求,并处理响应。与传统的 axiosfetch 相比,$fetch 提供了更好的集成和优化,特别是在处理服务器端渲染(SSR)时。

为什么使用 $fetch

1. 简化 HTTP 请求

$fetch 提供了简洁的 API,使得发起 HTTP 请求和处理响应变得更简单。您可以轻松地在 Vue 组件中获取数据或发送请求,而不需要手动管理请求和响应逻辑。

2. 支持服务器端渲染(SSR)

在 Nuxt3 中使用 $fetch 时,如果在服务器端渲染期间调用,它将直接模拟请求,避免了额外的 API 调用。这样可以提高性能并减少不必要的网络请求。

3. 避免重复数据获取

当在组件中使用 $fetch 时,若不结合 useAsyncDatauseFetch
使用,可能会导致数据在服务器端和客户端两次获取。为了防止这种情况,推荐使用 useAsyncDatauseFetch
来确保数据只在服务器端获取,并在客户端进行优化处理。

如何使用 $fetch

基本用法

$fetch 可以用来发送各种类型的 HTTP 请求。以下是一些常见的示例:

示例 1: 发送 GET 请求

1
2
3
4
5
6
7
8
9
10

<template>
<div>
<p>数据:{{ data }}</p>
</div>
</template>

<script setup lang="ts">
const data = await $fetch('/api/data');
</script>

在这个示例中,我们使用 $fetch 发送了一个 GET 请求到 /api/data,并将响应数据绑定到组件中的 data 变量。

示例 2: 发送 POST 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
<button @click="submitForm">提交</button>
</template>

<script setup lang="ts">
async function submitForm() {
const response = await $fetch('/api/submit', {
method: 'POST',
body: {name: 'John Doe', email: 'john@example.com'},
});
console.log(response);
}
</script>

在这个示例中,我们定义了一个 submitForm 函数,它会发送一个 POST 请求到 /api/submit,并传递一个 JSON 对象作为请求体。

结合 useAsyncDatauseFetch

为了优化数据获取,并避免在服务器端和客户端两次请求相同的数据,推荐使用 useAsyncDatauseFetch

示例 3: 使用 useAsyncData

1
2
3
4
5
6
7
8
9
10
11

<template>
<div>
<p>数据:{{ data }}</p>
</div>
</template>

<script setup lang="ts">

const {data} = await useAsyncData('item', () => $fetch('/api/item'));
</script>

在这个示例中,我们使用 useAsyncData 来获取数据。这将确保数据仅在服务器端获取一次,并将其传递到客户端,避免了重复获取。

示例 4: 使用 useFetch

1
2
3
4
5
6
7
8
9
10
11

<template>
<div>
<p>数据:{{ data }}</p>
</div>
</template>

<script setup lang="ts">

const {data} = await useFetch('/api/item');
</script>

useFetchuseAsyncData$fetch 的快捷方式,提供了类似的功能,但更为简洁。

使用 $fetch 仅在客户端执行

有时候,您可能只希望在客户端执行某些 HTTP 请求。例如,在用户点击按钮时发送请求:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
<button @click="contactForm">联系我们</button>
</template>

<script setup lang="ts">
async function contactForm() {
const response = await $fetch('/api/contact', {
method: 'POST',
body: {message: 'Hello from the client!'},
});
console.log(response);
}
</script>

在这个示例中,contactForm 函数仅在客户端触发,通过点击按钮发送一个 POST 请求。

参数说明

  • url: 请求的 URL 地址。
  • options: 可选的请求选项,如 methodbodyheaders 等。

总结

$fetch 是 Nuxt3 中进行 HTTP 请求的推荐方式,它提供了简洁的 API,并支持服务器端渲染(SSR)。通过结合使用 useAsyncData
useFetch,您可以优化数据获取流程,避免重复请求。希望这篇教程能够帮助您更好地理解和使用 $fetch

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜:编程智域 前端至全栈交流与成长,阅读完整的文章:

往期文章归档: