当我路由到另一个组件时,我在一个组件中有 API 个待处理的调用必须取消之前的 API 个调用
I have API call pending in one component when i route to another component previous API call has to be cancelled
我有一个问题,比如我在一个组件中调用 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 中作为通用路由更改处理
请帮我解决这个问题
您应该取消订阅第一个组件中的订阅。
向在其 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 调用是在之前的路线需要取消
我尝试使用 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 中作为通用路由更改处理
请帮我解决这个问题
您应该取消订阅第一个组件中的订阅。
向在其 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
运算符添加为最后一个运算符,以防止运算符链中的中间可观察量泄漏。