Angular/TypeScript 多表API返回数据获取与关联映射问题咨询

问题1：优先拉取所有SQL表数据是否符合前端开发最佳实践？ #

• 不符合常规项目的最佳实践，仅适合数据量极小（单表数据不超过百条）的内部工具类场景，原因如下：
  • 资源浪费：全量拉取会占用额外带宽、客户端内存，数据量稍大就会导致首屏加载变慢
  • 安全风险：用户、卡片这类包含敏感信息的表全量返回，容易造成数据泄露
  • 可扩展性差：后续数据量增长后会直接导致页面卡顿、接口超时
• 常规优化方案：
  • 按业务场景按需拉取，搭配分页、搜索过滤接口减少返回数据量
  • 后端接口直接返回关联后的数据结构，避免前端多次请求后手动拼接

问题2：数据关联映射实现方案 #

你可以先将卡片、用户数据转换为以ID为键的Map结构提升查找效率，拉取完所有数据后遍历做关联赋值即可。同时可以将原有串行请求改为并行请求，大幅降低总加载耗时，参考实现代码如下：

async getData() {
  // 并行拉取三类数据，总耗时等于耗时最长的单个接口耗时
  await Promise.all([this.getBooks(), this.getCards(), this.getUsers()]);
  this.associateData();
}

// 新增数据关联方法
private associateData() {
  // 构建cardId到Card对象的映射
  const cardMap = new Map<number, Card>(
    this.cards.map(card => [card.id, card])
  );
  // 构建userId到User对象的映射
  const userMap = new Map<number, User>(
    this.users.map(user => [user.id, user])
  );

  // 给book关联对应card
  this.books.forEach(book => {
    book.card = cardMap.get(book.cardId);
    // 可补充边界处理：如果找不到对应card，可设置默认值或打印日志
  });

  // 给card关联对应用户
  this.cards.forEach(card => {
    card.user = userMap.get(card.userId);
  });
}

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