如何在更改组件时取消 HttpRequests

Question

我正在使用 angular 5.

开发应用程序

我需要在 changing/detroyiog 个组件时停止所有 http 查询。

示例：我打开 ListUsersComponent，启动 http 查询以获取用户列表，在该查询完成之前我打开了 ListAdminsComponent。所以在网络（浏览器）中我有查询获取用户列表查询仍然未决。

我想在销毁 ListUsersComponent 时停止它。

how stop queries when i change the component?

Answer 1

这是解决方案：

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

  /** Cancels all pending Http requests. */
  public cancelPendingRequests() {
    this.cancelPendingRequests$.next()
  }

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

}

link : cancel

如何在更改组件时取消 HttpRequests

How to cancel HttpRequests when changing a component

httpclient

angular-http-interceptors

angular

angular5