Vue.js中提取组件内API请求代码的最佳实践：无模板组件还是ES6模块？

嗨，我来帮你梳理一下这个场景下的最佳实践——直接创建ES6模块是Vue项目里提取这类业务逻辑的首选方案，完全没必要用无模板组件，因为无模板组件更多是用来处理跨组件状态或者复杂交互逻辑复用（比如作为混入的替代方案），而单纯的API调用属于纯业务逻辑层，用模块的方式更清晰、更轻量，也更符合关注点分离的原则。

具体实现步骤 #

1. 创建独立的API模块 #

在项目里新建一个专门存放API逻辑的文件夹（比如src/api/），然后根据业务模块拆分文件，比如userApi.js，把原来组件里的API调用逻辑迁移进去，用ES6的导出语法封装：

// src/api/userApi.js
// 假设你用axios做请求，也可以替换成fetch或其他请求库
import axios from 'axios'

// 封装单个API方法
export const getUserInfo = async (userId) => {
  try {
    const response = await axios.get(`/api/users/${userId}`)
    return response.data
  } catch (error) {
    // 这里可以做统一错误处理，比如打印日志、抛出标准化错误
    console.error('获取用户信息失败:', error)
    throw error // 抛出错误让调用方可以自定义处理逻辑
  }
}

export const updateUserInfo = async (userId, formData) => {
  try {
    const response = await axios.put(`/api/users/${userId}`, formData)
    return response.data
  } catch (error) {
    console.error('更新用户信息失败:', error)
    throw error
  }
}

2. 在Vue组件中导入并使用 #

在需要调用API的组件里，直接导入这些封装好的方法，和使用普通模块完全一样：

<template>
  <div class="user-profile">
    <h2>{{ userInfo.name }}</h2>
    <button @click="handleUpdateProfile">更新资料</button>
  </div>
</template>

<script>
// 导入API方法
import { getUserInfo, updateUserInfo } from '@/api/userApi'

export default {
  data() {
    return {
      userInfo: {}
    }
  },
  async mounted() {
    try {
      // 组件挂载时调用API获取数据
      this.userInfo = await getUserInfo(this.$route.params.userId)
    } catch (error) {
      // 组件内自定义错误处理，比如显示提示弹窗
      this.$message.error('加载用户资料失败，请稍后重试')
    }
  },
  methods: {
    async handleUpdateProfile() {
      try {
        await updateUserInfo(this.$route.params.userId, { name: '新昵称' })
        this.$message.success('资料更新成功')
        // 重新拉取最新数据
        this.userInfo = await getUserInfo(this.$route.params.userId)
      } catch (error) {
        this.$message.error('更新失败，请检查网络')
      }
    }
  }
}
</script>

为什么不推荐用无模板组件？ #

无模板组件（仅包含script部分的Vue组件）通常用于全局状态管理、跨组件逻辑注入或者作为组件树中的逻辑节点（比如封装了复杂交互但不需要渲染DOM的组件）。而API调用属于纯业务逻辑，和组件的生命周期、DOM渲染完全无关，用模块的方式：

• 复用性更强：可以在Vue组件、Vuex Actions、其他工具函数里任意调用
• 更易维护：所有API逻辑集中管理，修改接口地址或参数只需要改一处
• 更易测试：可以单独对API模块做单元测试，不需要依赖Vue组件环境

进阶优化：统一请求拦截 #

如果项目里有多个API模块，建议再封装一个全局请求实例，统一处理请求头、超时、错误拦截等逻辑：

// src/api/request.js
import axios from 'axios'

// 创建自定义axios实例
const request = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 10000
})

// 请求拦截器：自动添加token
request.interceptors.request.use(
  config => {
    const token = localStorage.getItem('authToken')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)

// 响应拦截器：统一处理HTTP错误码
request.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 未授权时跳转到登录页
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default request

之后所有API模块都导入这个实例，避免重复配置：

// src/api/userApi.js
import request from './request'

export const getUserInfo = async (userId) => {
  const response = await request.get(`/users/${userId}`)
  return response.data
}

这样整个API层的逻辑会非常清晰，也便于后续的迭代和维护。

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