如何在重定向前等待所有必要网络请求完成？

针对你的场景——事件同时触发网络请求和跨应用重定向导致请求被中断的问题，以下是几个健壮的解决方案，从全局追踪到事件改造，覆盖不同场景需求：

方案一：全局请求追踪 + 延迟重定向（最推荐） #

通过Angular的HTTP拦截器自动追踪所有请求，统一管理活跃请求数量，重定向前等待所有请求完成。这种方式无需修改现有请求代码，自动化程度高，不易遗漏。

实现步骤 #

1. 创建请求追踪服务：管理活跃请求的计数，并提供等待所有请求完成的方法

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RequestTracker {
  private activeRequests$ = new BehaviorSubject<number>(0);

  get activeCount(): number {
    return this.activeRequests$.value;
  }

  // 等待所有活跃请求完成
  waitForCompletion(): Promise<void> {
    return new Promise(resolve => {
      const sub = this.activeRequests$.subscribe(count => {
        if (count === 0) {
          sub.unsubscribe();
          resolve();
        }
      });
      // 立即检查，避免无请求时不必要的等待
      if (this.activeCount === 0) {
        sub.unsubscribe();
        resolve();
      }
    });
  }

  // 内部方法，由拦截器调用更新计数
  increment(): void {
    this.activeRequests$.next(this.activeCount + 1);
  }

  decrement(): void {
    this.activeRequests$.next(this.activeCount - 1);
  }
}

2. 实现HTTP拦截器：自动拦截所有HttpClient发起的请求，更新追踪计数

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { finalize } from 'rxjs/operators';
import { RequestTracker } from './request-tracker.service';

@Injectable()
export class RequestTrackingInterceptor implements HttpInterceptor {
  constructor(private tracker: RequestTracker) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    this.tracker.increment();
    return next.handle(req).pipe(
      finalize(() => this.tracker.decrement())
    );
  }
}

3. 注册拦截器：在AppModule中添加拦截器配置

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestTrackingInterceptor } from './request-tracking.interceptor';

@NgModule({
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: RequestTrackingInterceptor, 
      multi: true 
    }
  ]
})
export class AppModule {}

4. 修改重定向逻辑：调用追踪服务的等待方法后再执行重定向

import { Injectable } from '@angular/core';
import { RequestTracker } from './request-tracker.service';

@Injectable({ providedIn: 'root' })
export class RedirectService {
  constructor(private tracker: RequestTracker) {}

  async redirectToAngularJS(): Promise<void> {
    // 等待所有请求完成
    await this.tracker.waitForCompletion();
    // 执行重定向
    window.location.href = '/angularjs-entry'; // 替换为实际的AngularJS入口URL
  }
}

5. 替换原重定向触发点：所有需要跳转到AngularJS的地方，调用redirectToAngularJS()而非直接修改window.location

补充说明 #

• 如果存在原生fetch或XMLHttpRequest发起的请求，需要手动用RequestTracker的increment()和decrement()包裹：

// 示例：包裹fetch请求
async fetchData(): Promise<any> {
  this.tracker.increment();
  try {
    const response = await fetch('/api/data');
    return response.json();
  } finally {
    this.tracker.decrement();
  }
}

方案二：事件总线改造 + 请求关联 #

如果重定向仅由特定事件触发，可以改造事件系统，在事件中关联请求Promise，等待请求完成后再执行重定向。这种方式适合场景明确、不需要全局追踪的情况。

实现步骤 #

1. 创建带请求关联的事件总线

import { Injectable } from '@angular/core';
import { Subject, Observable, filter, map } from 'rxjs';

type EventWithRequest<T = any> = {
  type: string;
  payload?: T;
  associatedRequest?: Promise<any>;
};

@Injectable({ providedIn: 'root' })
export class EventBus {
  private events$ = new Subject<EventWithRequest>();

  emit<T>(type: string, payload?: T, request?: Promise<any>): void {
    this.events$.next({ type, payload, associatedRequest: request });
  }

  on<T>(type: string): Observable<{ payload: T; request?: Promise<any> }> {
    return this.events$.pipe(
      filter(event => event.type === type),
      map(event => ({
        payload: event.payload as T,
        request: event.associatedRequest
      }))
    );
  }
}

2. 触发事件时关联请求

// 在组件/服务中触发事件，同时传入请求Promise
import { EventBus } from './event-bus.service';
import { DataService } from './data.service';

constructor(private eventBus: EventBus, private dataService: DataService) {}

handleUserAction(): void {
  // 发起请求并转为Promise
  const request = this.dataService.submitForm().toPromise();
  // 触发事件时关联请求
  this.eventBus.emit('user.action.completed', null, request);
}

3. 监听事件并等待请求完成后重定向

import { EventBus } from './event-bus.service';

constructor(private eventBus: EventBus) {
  this.eventBus.on('user.action.completed').subscribe(async ({ request }) => {
    // 如果有关联请求，等待完成
    if (request) {
      try {
        await request;
      } catch (err) {
        // 可选：处理请求失败的情况，比如提示用户后再重定向
        console.error('请求失败:', err);
      }
    }
    // 执行重定向
    window.location.href = '/angularjs-entry';
  });
}

方案三：页面卸载前的请求等待（兜底方案） #

如果以上方案无法覆盖所有场景，可以利用beforeunload事件拦截页面卸载，等待请求完成。但注意浏览器对beforeunload中的异步操作有时间限制，仅适合快速完成的请求。

实现示例 #

import { Injectable } from '@angular/core';
import { RequestTracker } from './request-tracker.service';

@Injectable({ providedIn: 'root' })
export class UnloadGuardService {
  constructor(private tracker: RequestTracker) {
    window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
  }

  private async handleBeforeUnload(event: BeforeUnloadEvent): Promise<void> {
    if (this.tracker.activeCount > 0) {
      // 阻止默认卸载提示（部分浏览器可能不支持）
      event.preventDefault();
      event.returnValue = '';
      // 等待请求完成后再允许卸载
      await this.tracker.waitForCompletion();
      // 手动触发卸载
      window.location.href = window.location.href;
    }
  }
}

注意事项 #

• 部分浏览器会忽略beforeunload中的长时间异步操作，仅适合请求耗时较短的场景。
• 这种方式是兜底，优先推荐方案一。

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