Angular 12中如何避免下拉触发API未完成时执行搜索？

针对用户选择下拉值后立即点击搜索，导致ID获取API未完成就执行搜索的问题，以下是几种无需禁用按钮的优化方案：

方案1：追踪待处理的ID请求，搜索时等待其完成 #

核心思路是记录当前是否有正在进行的ID请求，执行搜索时先等待该请求完成再发起搜索请求。

代码重构： #

1. 修改getId方法，使其返回Observable而非直接订阅，同时正确更新表单值：

/**
 * 获取ID并返回Observable
 */
private getId(): Observable<number> {
  return this.http.get(url, params).pipe(
    map(res => res.content.id),
    tap(id => {
      // 使用patchValue更新表单，触发变更检测
      this.reactiveForm.patchValue({ id });
    })
  );
}

2. 在组件中添加变量追踪待处理的ID请求：

private pendingIdRequest$: Observable<number> | null = null;

3. 更新valueChanges方法，保存待处理请求：

valueChanges(control, change) {
  if (control === TYPE1) {
    // 更新搜索查询逻辑
  } else if (control === TYPE2) {
    // 保存当前ID请求
    this.pendingIdRequest$ = this.getId();
    // 请求完成后清空标记
    this.pendingIdRequest$.subscribe(() => {
      this.pendingIdRequest$ = null;
    });
  }
}

4. 修改performSearch方法，优先等待待处理的ID请求完成：

public performSearch() {
  // 构建搜索请求Observable
  const searchRequest$ = this.http.post(url, this.reactiveForm.value).pipe(
    tap(res => {
      // 处理搜索结果
    })
  );

  // 如果有未完成的ID请求，先等待它完成再执行搜索
  if (this.pendingIdRequest$) {
    this.pendingIdRequest$.pipe(
      switchMap(() => searchRequest$)
    ).subscribe();
  } else {
    searchRequest$.subscribe();
  }
}

方案2：使用RxJS流联动ID请求与搜索请求 #

核心思路是将ID请求和搜索请求整合为一个异步流，确保搜索总是使用最新的有效表单数据（包括已获取的ID）。

代码重构： #

1. 定义一个Subject来触发搜索操作：

private searchTrigger$ = new Subject<void>();

2. 修改getId方法，保持返回Observable：

private getId(): Observable<number> {
  return this.http.get(url, params).pipe(
    map(res => res.content.id)
  );
}

3. 在组件初始化时，构建联动的异步流：

ngOnInit() {
  // 监听TYPE2控件的变化，触发ID请求
  const type2Change$ = this.reactiveForm.get('type2')!.valueChanges.pipe(
    switchMap(change => this.getId()),
    tap(id => this.reactiveForm.patchValue({ id }))
  );

  // 联动搜索触发与ID请求，确保搜索使用最新数据
  this.searchTrigger$.pipe(
    // 等待所有待处理的表单异步操作完成
    switchMap(() => combineLatest([of(null), type2Change$]).pipe(take(1))),
    switchMap(() => this.http.post(url, this.reactiveForm.value))
  ).subscribe(res => {
    // 处理搜索结果
  });
}

4. 更新valueChanges和performSearch方法：

valueChanges(control, change) {
  if (control === TYPE1) {
    // 更新搜索查询逻辑
  }
  // TYPE2的变化已在ngOnInit中监听，无需重复处理
}

public performSearch() {
  // 触发搜索流
  this.searchTrigger$.next();
}

方案3：表单控件异步验证（可选） #

如果ID是搜索的必填项，可以为对应表单控件添加异步验证器，确保只有当ID获取完成后，表单才处于有效状态，此时搜索请求才会执行：

// 为type2控件添加异步验证器
this.reactiveForm.get('type2')!.setValidators([
  (control: AbstractControl) => {
    return this.getId().pipe(
      map(id => {
        this.reactiveForm.patchValue({ id });
        return null; // 验证通过
      }),
      catchError(() => of({ idFetchFailed: true })) // 验证失败
    );
  }
]);

// 修改performSearch，仅当表单有效时执行
public performSearch() {
  if (this.reactiveForm.valid) {
    this.http.post(url, this.reactiveForm.value).subscribe(res => {
      // 处理搜索结果
    });
  }
}

关键注意点： #

• 永远不要直接修改reactiveForm.value，应该使用patchValue或setValue来更新表单控件，这样才能触发Angular的变更检测和表单状态更新。
• 使用RxJS操作符（如switchMap、combineLatest）可以优雅地管理异步流的顺序和依赖，避免竞态条件。

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