在JavaScript类中使用命名空间组织RESTful API客户端的最佳实践及问题解决

问题分析 #

你碰到的TypeError: this.request is not a function问题根源很明确：在core和auth对象里定义的getVersion函数，它们内部的this指向的是对象自身（比如core），而不是外层的API类实例。这就导致函数找不到API类里的request方法了。

下面是几种在同一个JavaScript类中实现模块化命名空间的最佳实践，你可以根据项目规模和复杂度选择合适的方案：

方案1：使用箭头函数绑定外层this

箭头函数会自动捕获外层作用域的this（也就是API类的实例），这是最简单直接的解决方案：

class API {
  constructor(config) {
    this.user_id = config.user_id
    this.password = config.password
    this.basePath = `https://${config.server}/`
    this.instance = axios.create({
      httpsAgent: new https.Agent({ rejectUnauthorized: false })
    });
    this.authToken = undefined
  }

  request(endpoint, body, config = {}) {
    const url = this.basePath + endpoint
    // 保留原有headers的同时添加Accept字段
    config.headers = { ...config.headers, "Accept": "application/json" }
    return this.instance.post(url, body, config)
      .then(res => res.data)
      .catch(error => console.error(error));
  }

  /*****************/
  /* Core Services */
  /*****************/
  core = {
    getVersion: () => {
      return this.request('core-service/getVersion', {}).then(res => {
        console.log(res)
      })
    }
    // 可以添加更多core模块方法
  }

  /*****************/
  /* Auth Services */
  /*****************/
  auth = {
    getVersion: () => {
      return this.request('auth-service/getVersion', {}).then(res => {
        console.log(res)
      })
    }
    // 可以添加更多auth模块方法
  }
}

这种方式的优点是代码改动小，不需要额外的绑定逻辑，适合小型项目或模块方法较少的场景。

方案2：在构造函数中手动绑定this

如果模块方法较多，或者你希望把方法定义在类的原型链上（方便复用和测试），可以在构造函数中用bind手动绑定this：

class API {
  constructor(config) {
    this.user_id = config.user_id
    this.password = config.password
    this.basePath = `https://${config.server}/`
    this.instance = axios.create({
      httpsAgent: new https.Agent({ rejectUnauthorized: false })
    });
    this.authToken = undefined

    // 初始化模块，绑定this到API实例
    this.core = {
      getVersion: this.coreGetVersion.bind(this)
    }
    this.auth = {
      getVersion: this.authGetVersion.bind(this)
    }
  }

  request(endpoint, body, config = {}) {
    const url = this.basePath + endpoint
    config.headers = { ...config.headers, "Accept": "application/json" }
    return this.instance.post(url, body, config)
      .then(res => res.data)
      .catch(error => console.error(error));
  }

  // Core模块方法定义在类上
  coreGetVersion() {
    return this.request('core-service/getVersion', {}).then(res => {
      console.log(res)
    })
  }

  // Auth模块方法定义在类上
  authGetVersion() {
    return this.request('auth-service/getVersion', {}).then(res => {
      console.log(res)
    })
  }
}

这种方式把模块方法和类的其他方法放在同一层级，结构更规整，适合中等规模的项目。

方案3：独立模块类（大型项目首选）

如果你的API模块很多、方法复杂，推荐把每个模块封装成独立的类，通过构造函数传入API实例作为上下文。这种方式职责划分更清晰，扩展性和可维护性更强：

// 独立的Core模块类
class CoreModule {
  constructor(apiInstance) {
    this.api = apiInstance
  }

  getVersion() {
    return this.api.request('core-service/getVersion', {}).then(res => {
      console.log(res)
    })
  }

  // 可添加更多Core模块专属方法
  fetchCoreStatus() {
    return this.api.request('core-service/status', {})
  }
}

// 独立的Auth模块类
class AuthModule {
  constructor(apiInstance) {
    this.api = apiInstance
  }

  getVersion() {
    return this.api.request('auth-service/getVersion', {}).then(res => {
      console.log(res)
    })
  }

  // 可添加更多Auth模块专属方法
  login() {
    return this.api.request('auth-service/login', {
      user_id: this.api.user_id,
      password: this.api.password
    })
  }
}

class API {
  constructor(config) {
    this.user_id = config.user_id
    this.password = config.password
    this.basePath = `https://${config.server}/`
    this.instance = axios.create({
      httpsAgent: new https.Agent({ rejectUnauthorized: false })
    });
    this.authToken = undefined

    // 初始化模块，传入当前API实例
    this.core = new CoreModule(this)
    this.auth = new AuthModule(this)
  }

  request(endpoint, body, config = {}) {
    const url = this.basePath + endpoint
    config.headers = { ...config.headers, "Accept": "application/json" }
    return this.instance.post(url, body, config)
      .then(res => res.data)
      .catch(error => console.error(error));
  }
}

这种方式每个模块的逻辑都被封装在独立的类中，方便单独测试和迭代，非常适合大型API客户端项目。

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