Angular使用ngOnChanges触发API调用出现重复请求如何避免

1. 增加输入属性值变化的精准判断 #

ngOnChanges触发时，仅当formName的当前值和旧值实际不同时才发起请求，排除值未发生有效变更的无效调用场景：

ngOnChanges(changes: SimpleChanges) {
  // 新增前后值对比逻辑
  if(changes.formName && changes.formName.currentValue !== changes.formName.previousValue) {
    this.getFormConfigurations(changes.formName.currentValue); 
  }
}

2. 自动取消未完成的历史请求 #

每次发起新请求前，取消上一次还未返回的表单配置请求，避免旧请求晚于新请求返回导致的数据错乱，同时减少无效请求：

import { Subscription } from 'rxjs';

// 组件内定义变量存储请求订阅
private formConfigSub: Subscription;

getFormConfigurations(formName: string): void {
  // 先取消上一次未完成的请求
  if (this.formConfigSub) {
    this.formConfigSub.unsubscribe();
  }
  console.log('Inside form call..');
  this.formConfigSub = this.api.getForm(formName).subscribe((result) => {
    // 业务逻辑处理
  })
}

// 组件销毁时取消订阅避免内存泄漏
ngOnDestroy() {
  if (this.formConfigSub) {
    this.formConfigSub.unsubscribe();
  }
}

3. 增加防抖处理（可选，适用于formName短时间频繁变更的场景） #

如果formName会在短时间内被多次赋值（比如联动搜索、快速切换选项），可以加防抖逻辑，等变更稳定后再发起请求，推荐结合RxJS操作符实现：

import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

// 组件内定义变更通知流
private formNameChange$ = new Subject<string>();

ngOnInit() {
  // 订阅变更流，加防抖、值去重、自动切换请求
  this.formNameChange$.pipe(
    debounceTime(300), // 防抖时间可根据业务场景调整
    distinctUntilChanged(), // 相同值直接过滤
    switchMap(formName => this.api.getForm(formName))
  ).subscribe(result => {
    // 业务逻辑处理
  })
}

ngOnChanges(changes: SimpleChanges) {
  if(changes.formName && changes.formName.currentValue) {
    this.formNameChange$.next(changes.formName.currentValue);
  }
}

ngOnDestroy() {
  this.formNameChange$.complete();
}

4. 新增请求缓存（可选，适用于formName重复出现的场景） #

如果同一个表单名称会被多次切换访问，可以缓存已经拉取过的表单配置，避免重复请求：

// 组件或公共服务内定义缓存Map
private formConfigCache = new Map<string, any>();

getFormConfigurations(formName: string): void {
  // 命中缓存直接返回
  if (this.formConfigCache.has(formName)) {
    const config = this.formConfigCache.get(formName);
    // 直接处理配置逻辑
    return;
  }
  this.api.getForm(formName).subscribe((result) => {
    // 请求成功后写入缓存
    this.formConfigCache.set(formName, result);
    // 业务逻辑处理
  })
}

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