如何从JavaScript Axios子类构造函数中移除通用参数

针对子类实例化时重复传入defaultHeaders、setloggedInUser这类通用参数的问题，以下是几种实用解决方式，同时满足defaultHeaders运行时可用的需求：

方案1：通过父类静态属性统一管理通用配置 #

将通用配置抽离为BaseService的静态属性，支持运行时更新，子类仅需传入baseurl即可完成实例化。

修改后的BaseService及子类代码：

class BaseService {
  // 静态属性存储通用配置，支持后续修改
  static defaultHeaders = {};
  static errorCallback = () => {};

  constructor(baseurl) {
    const options = {
      baseURL: baseurl,
      headers: BaseService.defaultHeaders
    };
    this.fetcher = axios.create(options);

    // 绑定错误回调到响应拦截器
    this.fetcher.interceptors.response.use(
      response => response,
      error => {
        BaseService.errorCallback(error);
        return Promise.reject(error);
      }
    );
  }

  // 静态方法：运行时更新通用配置
  static updateGlobalConfig(newHeaders, newErrorCallback) {
    if (newHeaders) {
      // 合并新headers，保留原有配置
      BaseService.defaultHeaders = { ...BaseService.defaultHeaders, ...newHeaders };
      // 可选：如需同步更新已创建实例的headers，可维护静态实例列表并遍历更新
    }
    if (newErrorCallback) {
      BaseService.errorCallback = newErrorCallback;
    }
  }
}

// 子类无需额外处理构造函数，直接继承即可
class ServiceA extends BaseService {}
class ServiceB extends BaseService {}

使用方式：

// 初始化通用配置（运行时动态传入）
BaseService.updateGlobalConfig(defaultHeaders, setloggedInUser);

// 创建实例时仅需传入baseurl
const serviceA = new ServiceA(IVA_URL);
const serviceB = new ServiceB(IVB_URL);

// 后续运行时如需更新headers，直接调用静态方法
BaseService.updateGlobalConfig({ Authorization: 'Bearer new-token' });

方案2：用工厂函数封装实例创建逻辑 #

如果不想修改BaseService原有结构，可通过工厂函数封装重复参数的传递逻辑，外部仅需传入子类和baseurl。

代码示例：

// 保留原有的BaseService和子类结构
class BaseService {
  constructor(baseurl, defaultHeaders, errorCallback) {
    const options = {
      baseURL: baseurl,
      headers: defaultHeaders
    };
    this.fetcher = axios.create(options);

    this.fetcher.interceptors.response.use(
      response => response,
      error => {
        errorCallback(error);
        return Promise.reject(error);
      }
    );
  }
}

class ServiceA extends BaseService {}
class ServiceB extends BaseService {}

// 工厂函数：封装通用参数的传递
function createService(ServiceClass, baseurl) {
  // 自动取运行时的最新defaultHeaders和setloggedInUser值
  return new ServiceClass(baseurl, defaultHeaders, setloggedInUser);
}

// 使用工厂创建实例
const serviceA = createService(ServiceA, IVA_URL);
const serviceB = createService(ServiceB, IVB_URL);

方案3：依赖注入容器（适合复杂项目） #

如果项目需要更灵活的配置管理，可通过配置容器提供通用参数，容器的getter能保证每次获取的都是运行时最新值。

代码示例：

// 配置容器，封装通用参数的获取逻辑
const configContainer = {
  get defaultHeaders() {
    // 可编写动态获取headers的逻辑，比如从全局状态、缓存中读取
    return defaultHeaders;
  },
  get errorCallback() {
    return setloggedInUser;
  }
};

class BaseService {
  constructor(baseurl) {
    const { defaultHeaders, errorCallback } = configContainer;
    const options = {
      baseURL: baseurl,
      headers: defaultHeaders
    };
    this.fetcher = axios.create(options);

    this.fetcher.interceptors.response.use(
      response => response,
      error => {
        errorCallback(error);
        return Promise.reject(error);
      }
    );
  }
}

class ServiceA extends BaseService {}
class ServiceB extends BaseService {}

// 创建实例
const serviceA = new ServiceA(IVA_URL);
const serviceB = new ServiceB(IVB_URL);

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