Gin-Vue-Admin前端HTTP请求封装：Axios拦截器与请求配置最佳实践

Gin-Vue-Admin前端HTTP请求封装：Axios拦截器与请求配置最佳实践

【免费下载链接】gin-vue-admin 项目地址: https://gitcode.com/gh_mirrors/gin/gin-vue-admin

Gin-Vue-Admin是一个基于Gin和Vue.js开发的全栈后台管理系统，其前端HTTP请求封装通过Axios拦截器实现了高效的请求管理和错误处理。本文将深入解析该项目的请求封装机制，帮助开发者掌握企业级前端HTTP请求配置技巧。

Axios基础配置与实例创建

Gin-Vue-Admin在web/src/utils/request.js中创建了Axios服务实例，配置了基础URL和超时时间：

const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API,
  timeout: 99999
})

这种配置方式确保了所有请求都使用统一的基础路径，便于环境切换和管理。

请求拦截器：智能加载与身份验证

请求拦截器是HTTP封装的核心，Gin-Vue-Admin实现了以下关键功能：

智能加载控制

通过activeAxios计数器实现请求并发管理，只有在真正需要时才显示加载动画：

service.interceptors.request.use(
  config => {
    if (!config.donNotShowLoading) {
      showLoading(config.loadingOption)
    }
    // 身份验证头部设置
    const userStore = useUserStore()
    config.headers = {
      'Content-Type': 'application/json',
      'x-token': userStore.token,
      'x-user-id': userStore.userInfo.ID,
      ...config.headers
    }
    return config
  }
)

响应拦截器：统一错误处理与Token刷新

响应拦截器负责处理服务器返回的数据，实现统一的错误处理和Token刷新机制：

成功响应处理

service.interceptors.response.use(
  response => {
    if (response.headers['new-token']) {
      userStore.setToken(response.headers['new-token'])
    }
    if (response.data.code === 0) {
      return response.data
    } else {
      // 错误消息提示
      ElMessage.error(response.data.msg)
      return Promise.reject(response.data)
    }
  }
)

错误状态码处理

针对不同的HTTP状态码提供个性化的错误处理：

• 500错误：服务器内部错误，提示用户查看日志或清理缓存
• 404错误：接口未找到，检查接口注册和路径匹配
• 401错误：Token无效，引导用户重新登录

API服务封装实践

在web/src/api/api.js中，Gin-Vue-Admin提供了清晰的API封装示例：

export const getApiList = (data) => {
  return service({
    url: '/api/getApiList',
    method: 'post',
    data
  })
}

每个API函数都包含详细的Swagger注释，便于生成接口文档和维护。

最佳实践与优化建议

1. 加载性能优化

通过延迟显示加载动画（400ms延迟）避免频繁闪烁，提升用户体验。

2. Token自动刷新

响应头中的new-token自动更新机制确保用户会话的连续性。

3. 错误处理标准化

统一的错误码处理和用户提示，降低用户困惑。

4. 类型安全

建议结合TypeScript增强API调用的类型安全性。

总结

Gin-Vue-Admin的HTTP请求封装展示了企业级前端项目的优秀实践，通过Axios拦截器实现了请求管理、身份验证、错误处理和加载控制的完美结合。这种封装模式不仅提高了代码的可维护性，还为开发者提供了稳定可靠的网络请求基础架构。

掌握这些封装技巧，将帮助您构建更加健壮和用户友好的前端应用程序。🚀

【免费下载链接】gin-vue-admin 项目地址: https://gitcode.com/gh_mirrors/gin/gin-vue-admin