Vue2 项目中通过封装 axios 来同时连接两个不同的后端服务器

你需要在 Vue2 项目中通过封装 axios 来同时连接两个不同的后端服务器，并编写对应的 API 调用模块，提供一套清晰、可维护的实现方案。

完整代码实现

1. 首先安装 axios（如果未安装）

bash 复制代码

npm install axios --save
# 或
yarn add axios

2. 创建 axios 实例配置文件（src/utils/request.js）

javascript 复制代码

import axios from 'axios';
import { Message, MessageBox } from 'element-ui'; // 假设你用了Element UI，可根据UI库调整

// 创建axios实例的通用方法
function createAxiosInstance(baseURL) {
  const service = axios.create({
    baseURL: baseURL, // 不同服务器的基础URL
    timeout: 5000, // 请求超时时间
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    }
  });

  // 请求拦截器
  service.interceptors.request.use(
    (config) => {
      // 可在此处添加token等通用请求头
      const token = localStorage.getItem('token');
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    },
    (error) => {
      console.error('请求错误:', error);
      return Promise.reject(error);
    }
  );

  // 响应拦截器
  service.interceptors.response.use(
    (response) => {
      const res = response.data;
      // 根据后端约定的状态码处理响应
      if (res.code !== 200) { // 假设200为成功状态码
        Message.error(res.message || '请求失败');
        // 401未授权处理
        if (res.code === 401) {
          MessageBox.confirm('登录状态已过期，请重新登录', '提示', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            localStorage.removeItem('token');
            window.location.reload();
          });
        }
        return Promise.reject(new Error(res.message || 'Error'));
      } else {
        return res;
      }
    },
    (error) => {
      console.error('响应错误:', error);
      Message.error(error.message || '服务器错误');
      return Promise.reject(error);
    }
  );

  return service;
}

// 创建两个不同服务器的axios实例
export const request1 = createAxiosInstance('http://server1.example.com/api'); // 第一个服务器地址
export const request2 = createAxiosInstance('http://server2.example.com/api'); // 第二个服务器地址

// 默认导出（可选，用于单服务器场景）
export default request1;

3. 编写 API 调用模块（src/api/）

(1) 第一个服务器的 API（src/api/server1Api.js）

javascript 复制代码

import { request1 } from '@/utils/request';

// 用户相关接口（服务器1）
export const userApi = {
  // 获取用户列表
  getUserList: (params) => {
    return request1.get('/users', { params });
  },
  // 获取用户详情
  getUserDetail: (id) => {
    return request1.get(`/users/${id}`);
  },
  // 创建用户
  createUser: (data) => {
    return request1.post('/users', data);
  }
};

// 产品相关接口（服务器1）
export const productApi = {
  // 获取产品列表
  getProductList: (params) => {
    return request1.get('/products', { params });
  }
};

(2) 第二个服务器的 API（src/api/server2Api.js）

javascript 复制代码

import { request2 } from '@/utils/request';

// 订单相关接口（服务器2）
export const orderApi = {
  // 获取订单列表
  getOrderList: (params) => {
    return request2.get('/orders', { params });
  },
  // 提交订单
  submitOrder: (data) => {
    return request2.post('/orders', data);
  },
  // 取消订单
  cancelOrder: (id) => {
    return request2.put(`/orders/${id}/cancel`);
  }
};

// 支付相关接口（服务器2）
export const paymentApi = {
  // 创建支付单
  createPayment: (data) => {
    return request2.post('/payments', data);
  }
};

4. 在 Vue 组件中使用 API

vue 复制代码

<template>
  <div>
    <el-button @click="getUserData">获取服务器1用户数据</el-button>
    <el-button @click="getOrderData">获取服务器2订单数据</el-button>
  </div>
</template>

<script>
import { userApi } from '@/api/server1Api';
import { orderApi } from '@/api/server2Api';

export default {
  methods: {
    async getUserData() {
      try {
        const res = await userApi.getUserList({ page: 1, size: 10 });
        console.log('服务器1用户数据:', res);
        // 处理数据...
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    },
    async getOrderData() {
      try {
        const res = await orderApi.getOrderList({ status: 'pending' });
        console.log('服务器2订单数据:', res);
        // 处理数据...
      } catch (error) {
        console.error('获取订单数据失败:', error);
      }
    }
  }
};
</script>

实现思路解析

1. 多 axios 实例设计

通过createAxiosInstance工厂函数封装通用的 axios 配置（拦截器、超时、请求头），避免重复代码
为每个后端服务器创建独立的 axios 实例（request1/request2），分别配置不同的baseURL
每个实例共享相同的拦截器逻辑，保证请求 / 响应处理的一致性

2. API 模块化管理

按服务器 + 业务模块 划分 API 文件（如server1Api.js/server2Api.js），结构清晰
每个业务模块封装为对象（如userApi/orderApi），便于调用和维护
API 方法返回 Promise，支持 async/await 语法，代码更简洁

3. 拦截器处理

请求拦截器：统一添加 token、设置通用请求头，减少重复逻辑
响应拦截器：统一处理后端返回的错误码（如 401 登录过期）、错误提示，避免在组件中重复处理错误

4. 环境变量配置（进阶优化）

为了区分开发 / 生产环境的服务器地址，可结合.env文件配置：

javascript 复制代码

// .env.development
VUE_APP_SERVER1_BASE_URL=http://dev-server1.example.com/api
VUE_APP_SERVER2_BASE_URL=http://dev-server2.example.com/api

// .env.production
VUE_APP_SERVER1_BASE_URL=http://prod-server1.example.com/api
VUE_APP_SERVER2_BASE_URL=http://prod-server2.example.com/api

// 在request.js中使用环境变量
export const request1 = createAxiosInstance(process.env.VUE_APP_SERVER1_BASE_URL);
export const request2 = createAxiosInstance(process.env.VUE_APP_SERVER2_BASE_URL);

总结

核心方案 ：通过创建多个 axios 实例分别指向不同服务器，配合模块化 API 封装实现双服务器调用
关键设计：使用工厂函数封装通用 axios 配置，保证代码复用；按业务模块组织 API，提高可维护性
最佳实践：结合环境变量管理不同环境的服务器地址，通过拦截器统一处理请求 / 响应逻辑

这种方案不仅支持双服务器，还能轻松扩展到更多服务器，且代码结构清晰、易于维护。