当我路由到另一个组件时，我在一个组件中有 API 个待处理的调用必须取消之前的 API 个调用

Question

我有一个问题，比如我在一个组件中调用 API 假设它处于挂起状态，现在我正在路由到另一个页面，之前的 API 调用是在之前的路线需要取消

我尝试使用 HttpCancelInterceptor

@Injectable()
export class HttpCancelInterceptor implements HttpInterceptor {
  constructor(private httpCancelService: HttpCancelService) { }

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

@Injectable()
export class HttpCancelService {
  private cancelPendingRequests$ = new Subject<void>()

  constructor() { }

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

  public onCancelPendingRequests() {
    return this.cancelPendingRequests$.asObservable()
  }

}

在app.component.ts

让它适用于我这样写的所有路线

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

我无法截取 API 我用例子来解释

按照上面的代码得到的结果

第 1 页：调用 3 API 全部处于待定状态（计数、数量、公告）当我转到另一个页面时，只有 1 API 被取消了

第 2 页：计数 API - 已取消金额 API - 待定公告 API - 待定

预期结果：

第 1 页：计数、金额、公告 API - 处于待处理状态
第 2 页：计数、数量、公告 API - 已取消状态

所有取消都需要在 app.component.ts 中作为通用路由更改处理

请帮我解决这个问题

Answer 1

您应该取消订阅第一个组件中的订阅。

向在其 class 代码中对 Observables 进行 .subscribe() 调用的所有组件添加 private ngUnsubscribe = new Subject(); 字段。

然后在 ngOnDestroy() 方法中调用 this.ngUnsubscribe.next(); this.ngUnsubscribe.complete();。

示例：

import { Component, OnDestroy, OnInit } from '@angular/core';
// RxJs 6.x+ import paths
import { filter, startWith, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { Myservice} from '../my.service';

@Component({
    selector: 'test-component',
    templateUrl: './test.component.html'
})
export class TestComponent implements OnDestroy, OnInit {
    private ngUnsubscribe = new Subject();

    constructor(private myService: Myservice) { }

    ngOnInit() {
        this.myService.getData()
            .pipe(
               startWith([]),
               filter(data=> data.length > 0),
               takeUntil(this.ngUnsubscribe)
            )
            .subscribe(data=> console.log(data));

        this.myService.getAnotherData()
            .pipe(takeUntil(this.ngUnsubscribe))
            .subscribe(anotherData=> console.log(anotherData));
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

重要的是将 takeUntil 运算符添加为最后一个运算符，以防止运算符链中的中间可观察量泄漏。

当我路由到另一个组件时，我在一个组件中有 API 个待处理的调用必须取消之前的 API 个调用

I have API call pending in one component when i route to another component previous API call has to be cancelled

angular

api

destroy