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页：Count API-已取消金额API-待定公告API-待处理

预期结果：

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

所有取消都需要在app.component.ts中作为常规路线更改进行处理

请帮助我解决此问题

Answer 1

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

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

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

示例：

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调用必须取消

1 个答案: