解决Angular路由导航时HTTP请求Pending状态问题

问题概述 #

• HTTP请求会长时间处于Pending状态（需等待10秒以上才开始发起）
• 在Angular路由导航（如routerLink='/dashboard/contact'）跳转时问题尤为突出，直接访问页面也会出现
• API请求getServerData在页面constructor或路由导航触发时执行，是页面内容加载的必要操作
• 已实现的本地缓存系统运行正常，API响应速度无问题，可排除这两类因素

相关代码 #

Dashboard组件（调用Service函数） #

getServerData(): void {
    if (!this.dataService.active_guild) { return; }
    if (!window.location.href.endsWith('/dashboard')) { return; }

    forkJoin({guildUsage: this.apiService.getGuildUsage(100),
              moduleStatus: this.apiService.getModuleStatus(this.dataService.active_guild!.id)})
      .subscribe({
        next: ({ guildUsage, moduleStatus }: { guildUsage: SliderItems[], moduleStatus: TasksCompletionList }): void => {
          this.updateTasks(moduleStatus);
          this.servers = guildUsage;

          this.dataService.isLoading = false;

          if (moduleStatus['task_1'].cached) { return; }
          localStorage.setItem('moduleStatus', JSON.stringify(moduleStatus));
          localStorage.setItem('moduleStatusTimestamp', Date.now().toString());
        },
        error: (err: HttpErrorResponse): void => {
          if (err.status === 403) {
            this.dataService.redirectLoginError('FORBIDDEN');
            return;
          } else if (err.status === 429) {
            this.dataService.redirectLoginError('REQUESTS');
            return;
          } else if (err.status === 0) {
            this.dataService.redirectLoginError('OFFLINE');
            return;
          }
          this.dataService.isLoading = false;
        }
    });
  }

Api-Service（发起HTTP请求） #

getGuildUsage(limit: number): Observable<SliderItems[]> {
    return this.http.get<SliderItems[]>(`${this.API_URL}/stats/guilds_usage` + (limit ? `?limit=${limit}` : ''));
  }

getModuleStatus(guild_id: string): Observable<TasksCompletionList> {
    const moduleStatusTimestamp: string | null = localStorage.getItem('moduleStatusTimestamp');
    const moduleStatus: string | null = localStorage.getItem('moduleStatus');

    try {
      if (moduleStatusTimestamp && moduleStatus) {
        const timestamp: number = parseInt(moduleStatusTimestamp);
        const module: TasksCompletionList = JSON.parse(moduleStatus);

        // check if module status cache is younger than 1 minute
        if (Date.now() - timestamp < 60000 && module['task_1'].guild_id === guild_id) {
          module['task_1'].cached = true;
          return of(module);
        }
      }
    } catch (error) { console.error('Cache reading error:', error); }

    return this.http.get<TasksCompletionList>(`${this.API_URL}/progress/modules?guild_id=${guild_id}`,
      { headers: this.authService.headers });
  }

排查方向 #

1. 路由守卫阻塞：检查是否存在CanActivate等路由守卫，其中是否有耗时的异步操作未正确处理，导致路由完成前请求无法触发。
2. HTTP拦截器延迟：查看自定义HTTP拦截器，是否在处理token、请求头时存在异步逻辑阻塞，比如未用switchMap等操作符正确流转Observable，导致请求排队。
3. 变更检测开销：Angular变更检测如果因复杂DOM或大量异步任务延迟，会影响请求触发时机。
4. 浏览器并发限制：同一域名下浏览器并发请求数有限（通常6个），检查是否有其他未完成的请求占用连接池。
5. active_guild初始化延迟：getServerData开头依赖this.dataService.active_guild，如果该值是异步加载的，可能导致请求触发被延后。

解决方案建议 #

• 优化路由守卫：确保守卫内操作快速完成，需异步数据的话提前缓存，避免阻塞路由流程。
• 修复HTTP拦截器：拦截器中避免耗时操作，异步逻辑用RxJS操作符（如switchMap）正确处理，防止请求队列阻塞。
• 调整请求触发时机：将请求从constructor移到ngOnInit钩子执行；路由导航时监听NavigationEnd事件，确认路由稳定后再发起请求。
• 提前加载依赖数据：用路由Resolver提前加载active_guild数据，确保组件初始化时该值已就绪，避免请求等待。
• 添加请求超时：给HTTP请求添加超时配置，避免无限Pending：

  import { timeout } from 'rxjs/operators';
  
  // 在getGuildUsage或getModuleStatus中添加
  return this.http.get(url).pipe(timeout(5000)); // 设置5秒超时
  

• 优化变更检测：对复杂组件使用ChangeDetectionStrategy.OnPush，减少不必要的变更检测开销。

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