如何将类实例化移入subscribe函数 避免短暂展示错误数据

方案1：将Token实例化完全移入subscribe回调（推荐，从根源避免空白实例渲染） #

该方案完全不会生成临时空白实例，直接解决页面短暂展示错误数据的问题，修改后代码如下：

{
  // 先缓存当前索引，避免异步回调执行时全局i已被修改导致索引错乱
  const currentIndex = this.i;
  this.tokenService.generate().subscribe((data: Token) => {
    // 回调内完成完整的Token实例化，所有参数一次性传入
    const newToken = new Token({
      id: currentIndex,
      copied: false,
      access_token: data.access_token,
      expiration: data.expiration,
      // 若需要user_id属性也可在此处补充对应取值逻辑传入
    });
    this.tokens.push(newToken);
    this.i++;
  });
}

方案2：改造Token类支持全参数构造，一次性完成实例初始化 #

如果你需要先做列表占位，也可以调整Token类的构造函数，支持传入全部属性完成初始化，避免实例化后再二次覆盖属性的操作，Token类改造示例：

class Token {
  id: number;
  copied: boolean;
  access_token: string;
  expiration: number;
  // 其他自定义属性在此处补充声明

  constructor(params: Partial<Token> & {id: number}) {
    this.id = params.id;
    this.copied = params.copied ?? false;
    this.access_token = params.access_token ?? '';
    this.expiration = params.expiration ?? 0;
    // 其他属性的赋值逻辑在此处补充
  }
}

改造后即可在subscribe回调中生成全属性的Token实例再存入数组，不会产生临时空白数据。

可选体验优化 #

如果需要展示请求中的加载状态，可以在发起请求时先往tokens数组中插入带loading: true标记的占位对象，页面根据loading字段渲染加载动画，接口返回后再替换为真实Token实例即可。

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