Vue2 项目二次封装Axios

引言

在现代前端开发中，HTTP请求管理是构建健壮应用的核心能力之一。Axios作为目前最流行的HTTP客户端库，其灵活性和可扩展性为开发者提供了强大的基础能力。

1. 为什么要二次封装Axios？

1.1 统一项目管理需求

• API路径标准化：通过baseURL统一管理接口前缀
• 超时控制：全局设置合理超时时间（如5s）
• 错误统一处理：集中管理网络异常和业务异常

1.2 拦截器核心作用

1.3 扩展性优势

• 便于后期添加全局缓存策略
• 统一处理安全认证机制
• 简化各组件中的请求代码

2. Axios与其他HTTP库对比

2. 基础封装实现

2.1 创建核心实例

// utils/request.js  
import axios from 'axios'  

// 创建基础实例  
const service = axios.create({  
  baseURL: '/api',   // 为每个请求添加上 /api 前缀
  timeout: 10000,  // 超时时间 10秒
  headers: {  
    'X-Requested-With': 'XMLHttpRequest'  
  }  
})  

export default service  

2.2 请求拦截器实现

service.interceptors.request.use((config) => {
    // Token处理
    const token = localStorage.getItem("token");
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    
    return config;
});

2.3 响应拦截器分层处理

service.interceptors.response.use(
    (res) => {
        // 成功响应处理
        if (res.data.code === 200) {
            return res.data;
        } else {
            return Promise.reject(res.data.message);
        }
    },
    (error) => {
        // 网络错误处理
        const errorMessage = error.response?.data?.message || "网络异常";
        console.error("API Error:", errorMessage);
        return Promise.reject(errorMessage);
    }
);

3. 接口模块化配置

3.1 创建API模块

一般在项目中，会对 api 统一管理，通常放在 src/api 目录下，并对其分模块管理，然后在 index.js 中统一暴露：

src/
├─ api/
│  ├─ system.js    # 系统相关接口
│  ├─ user.js      # 用户模块接口
│  ├─ product.js   # 商品模块接口
│  └─ index.js     # 统一导出入口

在 product. js 中编写方法：

// src/api/product.js
import request from "@/utils/request";

/**
 * 获取商品基础分类列表
 */
export const getBaseCategoryList = () => {
  return request({
    url: "/product/getBaseCategoryList",
    method: "get"
  });
};

然后统一暴露：

// index.js
export * as productAPI from "./product";

3.2 跨域解决

为什么会出现跨域？

1. 浏览器的同源策略：是重要的安全机制，限制以下行为的跨域访问：

   • AJAX请求
   • DOM访问
   • Cookie/Storage读取

2. 同源判定标准：协议+域名+端口 完全一致 才被允许访问

http://localhost:8080 ≠ https://localhost:8080 // 协议不同
http://a.com:8080 ≠ http://a.com:9090         // 端口不同

Vue项目解决方案（开发环境）

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/api": {                   // 匹配所有以/api开头的请求
        target: "http://gmall-h5-api.atguigu.cn",  // 后端服务器地址
        changeOrigin: true,       // 允许跨域
      }
    }
  }
};

注意： 配置完 vue.config.js 后需要重新启动。

3.3 测试接口调用

在 main.js 中测试:

import {productAPI} from "@/api";  
    
// 调用接口    
productAPI.getBaseCategoryList().then((data) => {  
    console.log(data);  
})

可以在控制台中看到，数据被成功输出：

4. 总结

通过对 Axios 进行二次封装，可以有效提升项目的开发效率和代码质量。在封装过程中，通过统一 API 路径、超时控制以及拦截器机制，不仅能集中管理请求与响应的逻辑，还能优化接口调用的可维护性和可扩展性。此外，通过模块化接口设计和跨域代理配置，我们能够更好地满足前后端分离架构下的开发需求。