如何在Nuxt 3中借助useFetch更优地组织API调用？

完全可以，Nuxt 3的useFetch结合组合式API，能实现甚至超越旧版本@nuxtjs/axios的API组织和解耦方案，且更贴合Nuxt 3的生态设计。以下是具体实现方式：

1. 全局API基础配置 #

先在nuxt.config.ts中配置API基础地址，方便全局复用：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: 'https://your-api-domain.com/v1' // 替换为你的实际API地址
    }
  }
})

2. 封装通用API请求钩子 #

在composables/useApi.ts中创建基础请求封装，统一处理请求头、错误拦截、baseURL等公共逻辑：

export const useApi = async (url: string, options: UseFetchOptions<any> = {}) => {
  const config = useRuntimeConfig()
  const authToken = useCookie('auth-token') // 示例：从cookie获取认证token

  // 公共请求配置
  const defaultOptions: UseFetchOptions<any> = {
    baseURL: config.public.apiBase,
    headers: {
      ...(authToken.value && { Authorization: `Bearer ${authToken.value}` }),
      'Content-Type': 'application/json'
    },
    // 请求错误统一处理
    onRequestError({ error }) {
      console.error('请求发送失败:', error)
      // 可在此添加全局错误提示（如Toast）
    },
    // 响应错误统一处理
    onResponseError({ response }) {
      console.error('API响应错误:', response)
      if (response?.status === 401) {
        navigateTo('/login') // 401时跳转登录页
      }
    }
  }

  return useFetch(url, { ...defaultOptions, ...options })
}

3. 按业务模块拆分API #

针对不同业务模块（如用户、文章）创建独立的API钩子，实现逻辑解耦。比如composables/useUserApi.ts：

export const useUserApi = () => {
  const api = useApi

  return {
    // 获取单个用户信息
    async getUser(userId: string) {
      const { data, error } = await api(`/users/${userId}`)
      return { user: data.value, requestError: error.value }
    },
    // 更新用户资料
    async updateUser(userId: string, userData: Partial<User>) {
      const { data, error } = await api(`/users/${userId}`, {
        method: 'PUT',
        body: userData
      })
      return { updatedUser: data.value, requestError: error.value }
    },
    // 用户登录
    async login(credentials: { email: string; password: string }) {
      const { data, error } = await api('/auth/login', {
        method: 'POST',
        body: credentials
      })
      if (data.value?.token) {
        useCookie('auth-token').value = data.value.token
      }
      return { authData: data.value, requestError: error.value }
    }
  }
}

4. 在组件/页面中使用 #

由于Nuxt 3会自动导入composables目录下的钩子，无需手动import即可直接使用：

<script setup lang="ts">
const { getUser } = useUserApi()
const { user, requestError } = await getUser('1001')

if (requestError) {
  // 处理错误
}
</script>

<template>
  <div v-if="user">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

方案优势 #

• 逻辑解耦：API请求逻辑集中在composables中，组件仅关注业务展示，与旧方案的axios封装思路一致但更轻量化。
• 原生适配：useFetch是Nuxt 3原生钩子，自动支持服务端渲染（SSR）、静态站点生成（SSG）等场景，无需额外配置。
• 自动导入：Nuxt 3自动识别composables目录，无需手动导入API钩子，开发效率更高。

内容的提问来源于stack exchange，提问作者ahmadafiquddin