Nuxt3封装网络请求 useFetch & $fetch

在现代 web 开发中，处理网络请求是一个不可或缺的部分。在使用 Nuxt 3 的过程中，useFetch 和 $fetch 是两个非常有用的 API，可以帮助我们轻松地进行数据获取。在这篇文章中，我们将详细探讨这两个 API 的使用，并结合代码示例使其更加清晰。

一、什么是 useFetch 和 $fetch

• useFetch 是一个组合式 API，主要用于在 Vue 组件中进行数据获取。它可以让我们用更简洁的方式来访问 API，并且自动处理响应和错误。

• $fetch 是 Nuxt 3 提供的一个全局方法，适用于服务器端和客户端。它的特点是支持 Promise，能够在 Nuxt 的 serverMiddleware 和 API 路由中被使用。

二、使用 useFetch

useFetch 用于在组件中发起网络请求并管理反应式数据。下面是一个基本的使用例子：

<template>
  <div>
    <h1>用户列表</h1>
    <ul v-if="data">
      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else>加载中...</p>
    <p v-if="error">{{ error.message }}</p>
  </div>
</template>

<script setup>
import { useFetch } from 'nuxt/app';

const { data, error } = await useFetch('https://jsonplaceholder.typicode.com/users');
</script>

在这个例子中： - 我们使用 useFetch 发送请求来获取用户数据。 - data 是返回的用户列表，可以直接在模板中使用。 - error 用于捕获和显示可能发生的错误。 - 这里的请求会在组件加载时自动触发。

三、使用 $fetch

$fetch 是一个全局方法，可用于任何地方，例如在 asyncData 中或在 serverMiddleware 中。我们来看一个使用 $fetch 的示例：

<template>
  <div>
    <h1>用户列表</h1>
    <ul v-if="users">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const users = ref([]);

async function fetchUsers() {
  try {
    const response = await $fetch('https://jsonplaceholder.typicode.com/users');
    users.value = response;
  } catch (error) {
    console.error('获取用户失败:', error);
  }
}

fetchUsers();
</script>

在这个例子中： - 我们定义了一个 fetchUsers 函数，在其中使用 $fetch 发送请求。 - 通过 await $fetch(...) 方法获取数据，并将其赋值给响应式变量 users。 - 我们用 try...catch 来捕获和处理可能的错误。

四、对比与总结

1. 使用场景

• useFetch 适用于组件中，提供了更简单的 API 和自动的响应状态管理。
• $fetch 可以在更广泛的场景中使用，适合在服务端和客户端的多种环境中。

2. 数据处理

• useFetch 返回的 data 和 error 是响应式的，非常方便与 Vue 的 reactivity 核心思想相结合。
• $fetch 需要手动管理响应状态，适合更复杂的请求逻辑。

3. 错误处理

• useFetch 统一处理错误，提供了简单的错误捕获方案。
• $fetch 需要通过 try...catch 语句来手动捕获错误并处理。

通过以上对比，我们可以得出，虽然 useFetch 和 $fetch 都是用于网络请求的工具，但它们各自的特点和适用场景不同。在实际开发中，根据需求选择合适的方法将大大提高我们的开发效率。

希望通过本篇文章的介绍，能够帮助大家更好地理解和使用 Nuxt 3 中的网络请求 API！