如何实现可动态指定控制器的Axios客户端？

1. 改造基础Axios客户端 #

先把原客户端的baseURL改为根域名，去掉静态的/test，保留通用基础地址：

import axios from "axios";

// 基础客户端仅保留根服务地址，不带具体控制器路径
const baseHttpClient = axios.create({
  baseURL: "https://localhost:7254",
});

// 保留原有拦截器逻辑
baseHttpClient.interceptors.request.use(
  (config) => config,
  (error) => Promise.reject(error)
);

baseHttpClient.interceptors.response.use(
  (response) => response,
  (error) => Promise.reject(error)
);

export default baseHttpClient;

2. 实现createService函数 #

这个函数负责解析带{base}占位符的路径模板，生成绑定特定控制器前缀的请求实例，提供两种实现方式：

方式一：生成带前缀的Axios实例（推荐） #

继承基础客户端的配置和拦截器，返回新的Axios实例，适合复用拦截逻辑的场景：

import baseHttpClient from './path-to-your-base-client';

export function createService(pathTemplate) {
  // 替换模板中的{base}为基础客户端的根地址
  const serviceBaseURL = pathTemplate.replace('{base}', baseHttpClient.defaults.baseURL);
  // 创建新实例，继承基础客户端的拦截器和配置
  return baseHttpClient.create({
    baseURL: serviceBaseURL
  });
}

方式二：封装请求方法 #

直接封装HTTP请求方法，动态拼接路径，适合不需要独立实例的场景：

import baseHttpClient from './path-to-your-base-client';

export function createService(pathTemplate) {
  const resolvedBase = pathTemplate.replace('{base}', baseHttpClient.defaults.baseURL);

  return {
    get(url, config) {
      return baseHttpClient.get(`${resolvedBase}${url}`, config);
    },
    post(url, data, config) {
      return baseHttpClient.post(`${resolvedBase}${url}`, data, config);
    },
    // 按需添加put、delete等其他HTTP方法
  };
}

3. 在服务中使用 #

现在可以按照你想要的方式调用createService：

// 生成绑定/test控制器的服务实例
export const myService = createService(`{base}/test`);

// 使用示例：请求/test/list接口
myService.get('/list')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

补充说明 #

• 后续切换环境（如开发/生产）时，仅需修改baseHttpClient的baseURL，所有通过createService生成的服务会自动适配新地址。
• 基础客户端的拦截器逻辑会被所有派生实例继承，无需重复配置。

内容的提问来源于stack exchange，提问作者Jesus