如何在 Angular 4+ 中取消/中止所有挂起的 HTTP 请求。
有一个unsubscribe 方法可以取消 HTTP 请求，但是如何一次性取消所有挂起的请求。
尤其是在路线变化时。
我做了一件事
ngOnDestroy() {
this.subscription.unsubscribe();
}
但是如何在全球范围内实现这一目标
有什么想法吗？
【问题讨论】：
标签： angular typescript rxjs angular-http-interceptors
签出 RxJS 中的 takeUntil() 运算符以在全球范围内取消您的订阅：
- RxJS 6+（使用pipe 语法）
import { takeUntil } from 'rxjs/operators';
export class YourComponent {
protected ngUnsubscribe: Subject<void> = new Subject<void>();
[...]
public httpGet(): void {
this.http.get()
.pipe( takeUntil(this.ngUnsubscribe) )
.subscribe( (data) => { ... });
}
public ngOnDestroy(): void {
// This aborts all HTTP requests.
this.ngUnsubscribe.next();
// This completes the subject properlly.
this.ngUnsubscribe.complete();
}
}
- RxJS
import 'rxjs/add/operator/takeUntil'
export class YourComponent {
protected ngUnsubscribe: Subject<void> = new Subject<void>();
[...]
public httpGet(): void {
this.http.get()
.takeUntil(this.ngUnsubscribe)
.subscribe( (data) => { ... })
}
public ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
您基本上可以在每次想要完成一堆流时使用next() 在取消订阅Subject 上发出一个事件。在组件被销毁时取消订阅活动的 Observable 也是一种很好的做法，以避免内存泄漏。
值得一读：
【讨论】：
您可以创建一个拦截器以将takeUntil 运算符应用于每个请求。然后在路由更改时，您将发出将取消所有待处理请求的事件。
@Injectable()
export class HttpCancelInterceptor implements HttpInterceptor {
constructor(private httpCancelService: HttpCancelService) { }
intercept<T>(req: HttpRequest<T>, next: HttpHandler): Observable<HttpEvent<T>> {
return next.handle(req).pipe(takeUntil(this.httpCancelService.onCancelPendingRequests()))
}
}
助手服务。
@Injectable()
export class HttpCancelService {
private cancelPendingRequests$ = new Subject<void>()
constructor() { }
/** Cancels all pending Http requests. */
public cancelPendingRequests() {
this.cancelPendingRequests$.next()
}
public onCancelPendingRequests() {
return this.cancelPendingRequests$.asObservable()
}
}
在您的应用中的某处挂钩路由更改（例如，appComponent 中的 onInit）。
this.router.events.subscribe(event => {
if (event instanceof ActivationEnd) {
this.httpCancelService.cancelPendingRequests()
}
})
最后但同样重要的是，将拦截器注册到您的 app.module.ts：
import { HttpCancelInterceptor } from 'path/to/http-cancel.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
[...]
providers: [
{
multi: true,
provide: HTTP_INTERCEPTORS,
useClass: HttpCancelInterceptor
}
],
[...]
})
export class AppModule { }
【讨论】：
如果您不想手动取消订阅所有订阅，则可以这样做：
export function AutoUnsubscribe(constructor) {
const original = constructor.prototype.ngOnDestroy;
constructor.prototype.ngOnDestroy = function() {
for (const prop in this) {
if (prop) {
const property = this[prop];
if (property && (typeof property.unsubscribe === 'function')) {
property.unsubscribe();
}
}
}
if (original && typeof original === 'function') {
original.apply(this, arguments)
};
};
}
然后你可以在你的组件中使用它作为装饰器
@AutoUnsubscribe
export class YourComponent {
}
但您仍然需要将订阅存储为组件属性。 并且当您导航出组件时，会出现自动取消订阅功能。
【讨论】：
(Array.isArray(property) ? property : [property]).filter(property => isFunction(property.unsubscribe)).forEach(property => property.unsubscribe()));.
我不相信需要所请求的功能，但您可以做到这一点，通过包装框架的 http 服务并委托给它，随时随地取消所有未完成的请求。
但是，当我们着手实施这项服务时，问题很快就会显现出来。一方面，我们希望避免更改现有代码，包括第三方代码，这些代码利用了现有的 Angular http 客户端。另一方面，我们希望避免实现继承。
为了两全其美，我们可以使用我们的包装器实现 Angular Http 服务。现有代码将继续工作而无需更改（前提是所述代码不会做任何愚蠢的事情，例如使用 http instanceof Http）。
import {Http, Request, RequestOptions, RequestOptionsArgs, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Subscription} from 'rxjs/Subscription';
export default interface CancellationAwareHttpClient extends Http { }
export default class CancellationAwareHttpClient {
constructor(private wrapped: Http) {
const delegatedMethods: Array<keyof Http> = [
'get', 'post', 'put', 'delete',
'patch', 'head', 'options'
];
for (const key of delegatedMethods) {
this[key] = wrapped[key].bind(wrapped);
}
}
cancelOutstandingRequests() {
this.subscriptions.forEach(subscription => {
subscription.unsubscribe();
});
this.subscriptions = [];
}
request(url: string | Request, options?: RequestOptionsArgs) {
const subscription = this.wrapped.request(url, options);
this.subscriptions.push(subscription);
return subscription;
}
subscriptions: Subscription[] = [];
}
请注意，CancellationAwareHttpClient 的 interface 和 class 声明已合并。这样，我们的类实现 Http 凭借interface 声明的extends 子句。
现在我们将提供我们的服务
import {NgModule} from '@angular/core';
import {ConnectionBackend, RequestOptions} from '@angular/http';
import CancellationAwareHttpClient from 'app/services/cancellation-aware-http-client';
let cancellationAwareClient: CancellationAwareHttpClient;
const httpProvider = {
provide: Http,
deps: [ConnectionBackend, RequestOptions],
useFactory: function (backend: ConnectionBackend, defaultOptions: RequestOptions) {
if (!cancellationAwareClient) {
const wrapped = new Http(backend, defaultOptions);
cancellationAwareClient = new CancellationAwareHttpClient(wrappedHttp);
}
return cancellationAwareClient;
}
};
@NgModule({
providers: [
// provide our service as `Http`, replacing the stock provider
httpProvider,
// provide the same instance of our service as `CancellationAwareHttpClient`
// for those wanting access to `cancelOutstandingRequests`
{...httpProvider, provide: CancellationAwareHttpClient}
]
}) export class SomeModule {}
请注意我们如何覆盖现有框架提供的服务。我们使用工厂来创建我们的实例，并且不向包装器本身添加任何 DI 装饰器，以避免注入器中的循环。
【讨论】：
Http 的服务或组件的情况下进行试验。
wrappedHttp？你的评论没有澄清这一点。你能和我们分享更多的细节吗？谢谢
【讨论】：
试试这个：
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Rx';
export class Component implements OnInit, OnDestroy {
private subscription: Subscription;
ngOnInit() {
this.subscription = this.route.params.subscribe();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
【讨论】：
//This is the example of cancelling the get request once you leave the TestComponent.
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
request: any;
someList: any;
constructor( private _someService: SomeService) {
}
ngOnInit() {
this.getList();
}
ngOnDestroy(){
this.request.unsubscribe(); // To cancel the get request.
}
getList() {
this.request= this._someService.getAll()
.subscribe((response: any) => {
this.someList= response;
}, (error) => {
console.log("Error fetching List", error);
})
}
}
【讨论】：
您可以创建一个自定义的 Http 服务（使用 HttpClient）来维护一个待处理请求的列表。每当您使用此自定义服务而不是 Http/HttpClient 触发 http 时，现在将订阅推送到列表并在响应返回时弹出该订阅。使用它，您将在列表中拥有所有不完整的订阅。
现在在同一个自定义服务的构造函数中注入路由器并订阅它以获取路由更改事件。现在，每当这个 observable 发出时，您需要做的就是取消订阅列表中存在的所有订阅并从中弹出所有元素。
如果您需要代码 sn-p，请在评论中提及。
【讨论】：
在@Bladito 答案中添加一些内容，这几乎是完美的。
实际上，HttpCancelService 堆栈是完美的，但问题在于它的调用位置。如果您有子路线，在导航结束时调用它可能会导致问题。
所以我制作了一个抽象容器组件，它在销毁时调用 HttpCancelService。这样我就可以在我想用更细的粒度削减任何 Http Canceling 请求时进行管理。
import { Component, OnDestroy, OnInit } from '@angular/core';
import { HttpCancelService } from '../../services/http-cancel-service.service';
@Component({
selector: 'some-abstract-container',
template: `
ABSTRACT COMPONENT
`,
styleUrls: ['./abstract-container.component.scss']
})
export class AbstractContainerComponent implements OnInit, OnDestroy {
constructor(protected readonly httpCancelService: HttpCancelService) {}
ngOnInit() {}
ngOnDestroy(): void {
this.httpCancelService.cancelPendingRequests();
}
}
还有一个扩展抽象组件的具体组件：
import { Component, OnInit } from '@angular/core';
import { AbstractContainerComponent } from '../../../shared/components/abstract-container/abstract-container.component';
import { HttpCancelService } from '../../../shared/services/http-cancel-service.service';
@Component({
selector: 'some-concrete-container',
templateUrl: '.some-concrete-container.component.html',
styleUrls: ['./some-concrete-container.component.scss']
})
export class SomeConcreteContainerComponent extends AbstractContainerComponent implements OnInit {
constructor(protected readonly httpCancelService: HttpCancelService) {
super(httpCancelService);
}
ngOnInit() {}
}
【讨论】：
我认为取消路由更改级别的请求不是一个好主意，因为这样会失去粒度。
例如，也许您想取消一个组件而不是另一个组件的请求，因为它不会破坏。最重要的是，后台请求呢？调试一些请求被随机取消的原因将非常棘手。
但通常最好取消 get 其组件将被破坏的请求，无论路由更改如何。
如果您想让您的生活更轻松，请使用until-destroy。当你的组件即将被销毁时，它会自动取消订阅所有的 observables (ngOnDestroy)。
它足够细化，更通用（不仅是 HttpRequests，而且所有 observables 都将被取消订阅）
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
@UntilDestroy()
@Component({})
export class InboxComponent {
ngOnInit() {
interval(1000)
.pipe(untilDestroyed(this))
.subscribe();
}
}
【讨论】：