Vue 项目接口封装：Axios 配置与拦截器实践

基础配置与环境隔离

在开始封装之前，我们需要先定义好请求的基础信息。通常我们会创建一个独立的配置文件来管理不同环境下的 API 地址，这样切换环境时只需修改一处。

// config.js
const serverConfig = {
  baseURL: "https://xxx.xxxxxxxx.com/api", // 请求基础地址，可根据环境自定义
  useTokenAuthorization: false // 是否开启 token 认证
};

export default serverConfig;

Axios 实例与拦截器

核心在于创建统一的 axios 实例，并配置请求和响应拦截器。这一步能帮我们集中处理 Token 注入、参数序列化以及全局错误提示，避免在每个组件里重复写同样的逻辑。

// api.js
import axios from "axios";
import serverConfig from "./config";
import qs from "qs";

// 创建 axios 请求实例
const serviceAxios = axios.create({
  baseURL: serverConfig.baseURL,
  timeout: 10000, // 请求超时设置
  withCredentials: false // 跨域请求是否需要携带 cookie
});

// 请求拦截器
serviceAxios.interceptors.request.use(
  (config) => {
    // 如果开启 token 认证，自动注入到请求头
    if (serverConfig.useTokenAuthorization) {
      config.headers["Authorization"] = .();
    }

    
     (!config.[]) {
       (config. === ) {
        config.[] = ;
        config. = qs.(config.); 
      }  {
        config.[] = ;
      }
    }

     config;
  },
   .(error)
);


serviceAxios...(
   {
    
     res.;
  },
   {
     message = ;
     (error && error.) {
       (error..) {
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
         :
          message = ;
          ;
        :
          message = ;
          ;
      }
    }
     .(message);
  }
);

  serviceAxios;