Axios 是一个基于 Promise 的 HTTP 库，常用于浏览器和 Node.js 环境中进行 HTTP 请求。在实际开发中，经常需要与多个不同的数据源进行交互，通过对 Axios 进行多数据源封装，可以提高代码的复用性和可维护性。以下是一种常见的 Axios 多数据源封装的实现方式：

创建 Axios 实例
在项目中创建一个专门用于 Axios 封装的文件，例如api.js。在这个文件中，首先导入 Axios 库，并为每个数据源创建独立的 Axios 实例。可以根据不同的基础 URL、请求头或其他配置来区分不同的数据源。

import axios from 'axios';

// 创建第一个数据源的Axios实例
export const axiosInstance1 = axios.create({
  baseURL: 'https://api.example1.com',
  headers: {
    'Content-Type': 'application/json'
  }
});
// 堆代码 duidaima.com
// 创建第二个数据源的Axios实例
export const axiosInstance2 = axios.create({
  baseURL: 'https://api.example2.com',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  }
});

封装请求方法
针对每个 Axios 实例，封装各种 HTTP 请求方法，如 GET、POST、PUT、DELETE 等。可以根据具体的业务需求，对请求和响应进行统一的处理，例如添加请求拦截器、响应拦截器，处理错误等。

// 为axiosInstance1封装GET方法
export const getFromSource1 = (url, params) => {
  return axiosInstance1.get(url, { params })
   .then(response => response.data)
   .catch(error => {
      // 统一处理错误
      console.error('Error from source 1:', error);
      throw new Error('Failed to fetch data from source 1');
    });
};

// 为axiosInstance2封装POST方法
export const postToSource2 = (url, data) => {
  return axiosInstance2.post(url, data)
   .then(response => response.data)
   .catch(error => {
      // 统一处理错误
      console.error('Error from source 2:', error);
      throw new Error('Failed to post data to source 2');
    });
};

在组件中使用封装的方法
在需要与数据源进行交互的组件或模块中，导入封装好的方法并使用。

import { getFromSource1, postToSource2 } from './api';

// 在某个React组件中使用
const MyComponent = () => {
  const handleClick = async () => {
    try {
      // 从第一个数据源获取数据
      const dataFromSource1 = await getFromSource1('/some-endpoint', { id: 1 });
      console.log('Data from source 1:', dataFromSource1);

      // 向第二个数据源发送数据
      const resultFromSource2 = await postToSource2('/another-endpoint', { name: 'John' });
      console.log('Result from source 2:', resultFromSource2);
    } catch (error) {
      // 处理组件中的错误
      console.error('Component error:', error);
    }
  };

  return (
    <button onClick={handleClick}>Fetch and Post Data</button>
  );
};

export default MyComponent;

添加拦截器（可选）
可以为每个 Axios 实例添加请求拦截器和响应拦截器，用于统一处理一些通用的逻辑，如添加请求头、处理响应数据的格式、处理登录状态过期等。

// 为axiosInstance1添加请求拦截器
axiosInstance1.interceptors.request.use(config => {
  // 在发送请求之前做一些处理，例如添加时间戳
  config.params = {...config.params, timestamp: Date.now() };
  return config;
}, error => {
  return Promise.reject(error);
});

// 为axiosInstance2添加响应拦截器
axiosInstance2.interceptors.response.use(response => {
  // 对响应数据进行一些处理，例如统一格式化
  if (response.data && response.data.data) {
    return response.data.data;
  }
  return response.data;
}, error => {
  // 处理响应错误，例如根据状态码进行不同的处理
  if (error.response.status === 401) {
    // 跳转到登录页面
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

通过以上步骤，就可以实现 Axios 的多数据源封装，使得在项目中与不同的数据源进行交互变得更加清晰、便捷和易于维护。