Angular11中如何避免快速点击链接时Route Resolver多次执行

问题根本原因 #

你在Resolver内部添加的debounceTime仅作用于单次Resolver调用产生的Observable，快速点击会触发多次独立的路由导航和Resolver执行，每个执行上下文完全独立，debounce无法跨上下文生效，因此无法解决重复请求问题。

可行解决方案 #

1. API层全局请求去重（最推荐）

在封装的HTTP请求服务中新增同请求去重逻辑，同一个URL+参数的请求处于pending状态时，新的相同请求直接复用当前pending的Observable，不会重复发起网络请求：

// api.service.ts
import { finalize, share } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private pendingRequests = new Map<string, Observable<any>>();

  constructor(private http: HttpClient) {}

  get(url: string, params?: any): Observable<any> {
    // 生成请求唯一标识，可根据业务调整标识规则
    const reqKey = `${url}_${JSON.stringify(params || {})}`;
    
    // 已有同请求正在处理，直接返回现有Observable
    if (this.pendingRequests.has(reqKey)) {
      return this.pendingRequests.get(reqKey);
    }

    const request$ = this.http.get(url, { params }).pipe(
      share(), // 多订阅共享同一个请求结果
      finalize(() => this.pendingRequests.delete(reqKey)) // 请求完成/失败后清除标识
    );

    this.pendingRequests.set(reqKey, request$);
    return request$;
  }
}

该方案从请求根源避免重复调用，不受上层业务场景（Resolver、组件直接调用等）影响，适配性最强。

2. 路由跳转加点击锁

在路由跳转的触发入口添加导航状态锁，导航未完成时禁止重复触发跳转操作：
如果是手动调用navigate跳转，直接加状态判断：

// 路由跳转所在组件
isNavigating = false;

navToTargetPage() {
  if (this.isNavigating) return;
  this.isNavigating = true;
  this.router.navigate(['/target-route']).pipe(
    finalize(() => this.isNavigating = false)
  ).subscribe();
}

如果是使用routerLink指令跳转，可以封装自定义的防抖路由跳转指令，内部实现上述加锁逻辑即可。

3. Resolver内绑定路由事件取消废弃请求

在Resolver内部监听路由事件，当导航被新的导航覆盖取消时，自动终止当前Resolver的未完成请求：

// xxx.resolver.ts
import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class XxxResolver implements Resolve<any> {
  constructor(private apiService: ApiService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.apiService.getTargetData().pipe(
      // 导航结束/取消时终止当前请求
      takeUntil(this.router.events.pipe(
        filter(e => e instanceof NavigationEnd || e instanceof NavigationCancel)
      ))
    );
  }
}

该方案不会阻止Resolver执行，但会及时终止无效的废弃请求，减少服务器资源消耗。

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