Angular WebApi项目页面刷新后oData数组变为undefined如何解决

• 核心原因是HTTP异步请求的时序问题：getDbData()属于异步网络请求，ngOnInit触发请求后不会等待接口返回就会执行后续逻辑，页面刷新后如果在接口返回前就调用importData()或者访问oData，此时oData还未被赋值，自然为undefined。首次运行能正常获取，是因为你调用importData()的时机晚于接口返回时间。
• 若你之前尝试localStorage未生效，大概率是没有在接口返回的回调中正确写入缓存，或者读取缓存的逻辑有误。

方案1：优化调用时序+增加空值防护 #

给oData设置初始值，所有使用oData的逻辑都增加空判断，需要依赖接口数据执行的逻辑放在订阅回调内触发：

// 给oData设置初始空数组，从根源避免undefined
oData: DataFactory[] = [];

ngOnInit(): void {
  this.mydataser.getDbData().subscribe(data => {
    this.oData = data;
    // 依赖oData的逻辑放在订阅回调内执行，确保已经拿到数据
    this.importData();
  });
}

public importData() {
  // 额外增加空值判断，兼容手动调用的场景
  if (this.oData.length === 0) {
    console.log('数据加载中，请稍后重试');
    return;
  }
  console.log(this.oData);
  // 后续业务逻辑
}

如果是模板中使用oData，增加可选链或者ngIf防护：

<!-- 可选链写法 -->
<div>数据条数：{{oData?.length}}</div>

<!-- 加载完成再渲染的写法 -->
<div *ngIf="oData.length > 0">
  <!-- 渲染oData相关内容 -->
</div>

方案2：正确使用localStorage做缓存 #

如果需要减少重复接口请求，按以下逻辑实现本地缓存即可：

ngOnInit(): void {
  // 初始化时先读本地缓存
  const cache = localStorage.getItem('db_data_cache');
  if (cache) {
    this.oData = JSON.parse(cache) as DataFactory[];
  }
  // 发起请求更新数据，同时更新缓存
  this.mydataser.getDbData().subscribe(data => {
    this.oData = data;
    localStorage.setItem('db_data_cache', JSON.stringify(data));
  });
}

如果需要控制缓存有效期，可以在写入缓存的时候额外存储时间戳，读取时判断是否超过有效期，过期则直接丢弃缓存等待接口返回。

方案3：路由预加载数据 #

如果该数据是当前页面的必填数据，可以用Angular的Resolve路由守卫，在路由进入前就完成数据加载，组件初始化时直接就能拿到完整数据：

1. 首先创建Resolve服务

@Injectable({ providedIn: 'root' })
export class DbDataResolve implements Resolve<DataFactory[]> {
  constructor(private mydataser: MyDataService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<DataFactory[]> {
    return this.mydataser.getDbData();
  }
}

2. 路由配置中添加Resolve配置

const routes: Routes = [
  {
    path: '你的页面路由',
    component: 你的组件,
    resolve: { oData: DbDataResolve }
  }
];

3. 组件中直接从路由快照获取数据

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  // 此处拿到的oData一定是加载完成的，刷新也不会出现undefined
  this.oData = this.route.snapshot.data['oData'];
  this.importData();
}

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