如何取消/取消订阅Angular 4中所有挂起的HTTP请求

Question

如何取消/中止angular 4中所有挂起的HTTP请求。

有一个取消HTTP请求的unsubscribe方法，但是如何一次取消所有挂起的请求。

尤其是在改变路线的时候。

我做了一件事

ngOnDestroy() {
  this.subscription.unsubscribe();
}

但是如何在全球范围内实现这一点

有什么想法吗？

Answer 1

如果你不想手动退订所有订阅，那么你可以这样做：

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  {
}

但是您仍然需要将订阅存储为组件属性。当您导航出组件时，将出现自动取消订阅功能。

Answer 2

您可以创建一个拦截器来对每个请求应用teatle运算符。然后在路由更改时，您将发出取消所有挂起请求的事件。

@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 { }

Answer 3

从RxJS中检出 运算符以全局删除订阅：

-RxJS 6（使用管道语法）

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（）在退订主题上发出事件。当组件被销毁时，取消订阅活动的可观测对象也是一个很好的做法，以避免内存泄漏。

值得一读：

>

在泄漏前避免服用

Seangwright的一个很棒的回答