使用 Angular 攔截器取消所有待處理的 http 請求

Question

我的攔截器：

constructor(router: Router,
        private httpCancelService: HttpCancelService) {
        router.events.subscribe(event => {
            if (event instanceof ActivationEnd) {
                this.httpCancelService.cancelPendingRequests();
            }
        });
    }

    intercept<T>(req: HttpRequest<T>, next: HttpHandler): Observable<HttpEvent<T>> {
        return next.handle(req).pipe(takeUntil(this.httpCancelService.onCancelPendingRequests()));
    }

我的取消服務：

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

    constructor() { }


    public cancelPendingRequests() {
        this.pendingHTTPRequests$.next();
    }

    public onCancelPendingRequests() {
        return this.pendingHTTPRequests$.asObservable();
    }

它對我來說非常有效，但我遇到的問題是，當我將路由更改為生成多個初始請求的路由時，它會取消我之前路由的待處理請求並取消我當前路由的請求。

我該怎么做才能只取消我之前路由的待處理請求而不觸及我當前路由的任何請求

謝謝！！

Answer 1

當您導航到新位置時， ActivationEnd事件會在組件加載后發生。 如果您收聽NavigationStart事件，則會取消所有事件，然后加載新組件。

所以你的攔截器ctor應該看起來像：

router.events.subscribe(event => {
     if (event instanceof NavigationStart ) {
          this.httpCancelService.cancelPendingRequests();
     }
});

重要提示：我建議的事件可能不適合您，請查看文檔並查看最適合您的： https://angular.io/api/router/Event