在Nuxt3中封装网络请求可以帮助我们更好地管理和复用API调用。我们可以使用useFetch或$fetch来发起HTTP请求，并通过创建插件或组合式函数来封装这些请求。

下面是一个简单的示例，展示如何在Nuxt3中封装网络请求：

  1. 创建一个组合式函数来封装网络请求。
  2. 在页面或其他组件中使用这个封装好的函数。

首先，创建一个组合式函数文件 composables/useApi.js：

接下来，在 nuxt.config.ts 中配置API的基本URL：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: 'https://', // 替换为你的API基础URL
    },
  },
});

最后，在页面或其他组件中使用封装好的 useApi 函数：

<script setup>
const { fetchData } = useApi();

async function fetchUserData(userId) {
  try {
    const userData = await fetchData(`/users/${userId}`);
    console.log(userData);
  } catch (error) {
    console.error('Failed to fetch user data:', error);
  }
}

// 调用 fetchUserData 方法获取用户数据
fetchUserData(1);
</script>

<template>
  <div>
    <h1>User Data Fetch Example</h1>
  </div>
</template>

在这个例子中，我们创建了一个名为 useApi 的组合式函数，它包含了用于发送HTTP请求的 fetchData 方法。然后我们在 nuxt.config.ts 中配置了API的基本URL，并在页面组件中使用 useApi 来获取用户数据。

这样做的好处是可以集中管理所有的网络请求逻辑，并且可以在需要时轻松地更改请求的基础URL或其他配置选项。