如何通过代理在客户端类型化调用NestJS服务端方法？

当然可以实现直接引用服务端方法风格的调用，彻底替代硬编码的路由字符串。以下是几种落地性强的方案：

方案1：手动封装客户端代理类（最易上手） #

在客户端创建一个与服务端控制器对应的代理类，内部封装Axios请求逻辑，统一管理路由路径：

// client/services/document.service.ts
import axios from 'axios';

// 与服务端控制器逻辑一一对应
export class DocumentService {
  // 统一维护路由路径，变更时只需修改此处
  private static readonly BASE_PATH = '/Document';

  static async saveMetadata(metadata: any) {
    return axios.post(`${this.BASE_PATH}/saveMetadata`, metadata);
  }

  // 后续新增方法直接在此扩展
  // static async getDocument(id: string) {
  //   return axios.get(`${this.BASE_PATH}/get/${id}`);
  // }
}

客户端调用时直接使用类方法：

import { DocumentService } from './client/services/document.service';

// 无需关心底层路由，直接调用方法
await DocumentService.saveMetadata(data);

方案2：利用NestJS元数据自动生成客户端代码（高可维护性） #

NestJS的装饰器（@Controller、@Post等）会给类和方法注入元数据，我们可以通过反射API提取这些元数据，自动生成客户端代理代码，彻底消除手动维护成本。

步骤1：服务端编写生成脚本 #

创建一个Node脚本，扫描控制器的元数据并生成客户端代码：

// scripts/generate-client-proxies.ts
import { Reflector } from '@nestjs/core';
import { DocumentController } from '../src/document-controller';
import * as fs from 'fs';
import * as path from 'path';

const reflector = new Reflector();
const controllerMetadata = Reflect.getMetadata('__controller__', DocumentController);
const controllerPrefix = controllerMetadata[0];

// 提取控制器所有方法的路由元数据
const methods = Object.getOwnPropertyNames(DocumentController.prototype)
  .filter(name => name !== 'constructor')
  .map(methodName => {
    const postMetadata = reflector.get('__post__', DocumentController.prototype[methodName]);
    return {
      methodName,
      route: postMetadata[0]
    };
  });

// 生成客户端代理类代码
const clientCode = `
import axios from 'axios';

export class DocumentService {
  private static readonly BASE_PATH = '/${controllerPrefix}';

  ${methods.map(item => `
  static async ${item.methodName}(data: any) {
    return axios.post(\`\${this.BASE_PATH}/${item.route}\`, data);
  }
  `).join('\n')}
}
`;

// 写入客户端目录
fs.writeFileSync(path.join(__dirname, '../client/services/document.service.ts'), clientCode.trim());

步骤2：添加生成脚本命令 #

在package.json中添加命令，方便每次服务端路由变更后执行：

{
  "scripts": {
    "generate:client": "ts-node scripts/generate-client-proxies.ts"
  }
}

步骤3：客户端使用自动生成的类 #

执行npm run generate:client后，直接调用生成的方法即可，完全无需手动维护路由。

方案3：动态Proxy拦截调用（极简实现） #

利用JS的Proxy对象拦截方法调用，自动拼接路由路径（适合路由与方法名完全一致的场景）：

// client/utils/api-proxy.ts
import axios from 'axios';

export function createApiProxy(controllerPrefix: string) {
  return new Proxy({}, {
    get(_, methodName: string) {
      // 默认方法名即为路由名，若不一致可自行扩展映射规则
      return async (data: any) => {
        return axios.post(`/${controllerPrefix}/${methodName}`, data);
      };
    }
  });
}

// 使用示例
const DocumentApi = createApiProxy('Document');
await DocumentApi.saveMetadata(data);

额外优化：类型安全保障 #

将服务端的DTO（数据传输对象）文件共享给客户端，实现参数类型校验：

// src/dtos/metadata.dto.ts（服务端定义）
export class MetadataDTO {
  title: string;
  content: string;
  // 其他字段...
}

客户端导入DTO后，在代理方法中指定参数类型：

import { MetadataDTO } from '../src/dtos/metadata.dto';

static async saveMetadata(metadata: MetadataDTO) {
  return axios.post(`${this.BASE_PATH}/saveMetadata`, metadata);
}

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