BFF 架构设计

BFF = Backend For Frontend（为前端而生的后端）。 它是一层介于「前端应用」和「后端微服务」之间的轻量服务，由前端团队维护，专门为前端页面提供"刚刚好"的接口。

没有 BFF 时的三个痛点

1. 接口太碎：订单详情页要调 5 个后端接口（订单/商品/优惠/物流/评价），前端串行请求，页面慢且脆弱。
2. 字段太多：后端返回 80 个字段，前端只用 15 个，流量浪费、联调扯皮。
3. 鉴权复杂：每个接口都要带 token、处理错误码，前端到处写重复逻辑。

场景

订单详情页需要：订单信息（订单服务）+ 商品信息（商品服务）+ 物流信息（物流服务）。前端只想要一个 GET /api/order-detail/:id。

代码实现

// order.controller.ts —— BFF 暴露给前端的聚合接口
@Controller('order-detail')
export class OrderDetailController {
  constructor(private readonly agg: OrderAggregateService) {}

  @Get(':id')
  async get(@Param('id') id: string, @Req() req: Request) {
    // 1. 并行调用三个后端服务（Promise.all）
    const [order, goods, logistics] = await Promise.all([
      this.agg.getOrder(id, req.token),
      this.agg.getGoods(id, req.token),
      this.agg.getLogistics(id, req.token),
    ]);
    // 2. 裁剪：只留前端需要的字段，按页面结构组装
    return {
      orderNo: order.orderNo,
      status: order.status,
      amount: order.amount,           // 去掉内部字段
      goods: goods.map(g => ({ name: g.name, img: g.img, price: g.price })),
      logistics: logistics.tracks.slice(0, 3), // 只取最近 3 条
    };
  }
}

// order-aggregate.service.ts —— 内部服务调用 + 统一鉴权
@Injectable()
export class OrderAggregateService {
  constructor(private readonly http: HttpService) {}

  private headers(token: string) {
    return { Authorization: `Bearer ${token}` };
  }

  getOrder(id: string, token: string) {
    return firstValueFrom(this.http.get(`http://order-svc/orders/${id}`, { headers: this.headers(token) }).pipe(map(r => r.data)));
  }
  // getGoods / getLogistics 同理…
}

背景

电商 App 订单详情页原实现：前端依次调 5 个接口（串行），最慢情况 6.8s 才出全。后端团队改接口排期要两周，业务等不起。

方案（前端团队自建 BFF，3 天上线）

1. NestJS 起一个 order-bff 服务，暴露 /api/order-detail/:id
2. 内部并行调 5 个服务，加 2s 超时与局部降级（物流挂了返回空数组，不影响主信息）
3. 前端改一个接口地址，其余逻辑不动

结果与复盘

• 接口耗时 6.8s → 1.2s（-82%）；页面整体可交互时间 -58%
• 后续加字段（如"售后状态"）只改 BFF 一行聚合，前端零改动
• 教训：BFF 也要有监控（耗时/错误率/依赖服务健康），否则会成为新的单点；另外别把 BFF 写成"大杂烩"，聚合逻辑过多会重蹈巨石覆辙，按业务域拆 BFF 服务

要求

1. 用 NestJS（或 Express）建 order-bff 服务
2. mock 三个后端接口（商品/库存/评价），延迟 200ms 模拟真实网络
3. BFF 暴露 GET /api/list：并行聚合 + 只返回前端需要的字段
4. 一个依赖服务返回 500 时，BFF 降级（该字段返回空）而不是整体报错

通关标准

• curl 一次请求拿到完整列表数据（证明聚合成功）
• 停掉其中一个 mock 服务，接口仍返回 200（证明降级生效）
• 能口头讲清：BFF 四大职责、为什么用 Promise.all、token 怎么透传