Angular cancel http request

// http-cancel.service.ts
// use this service as DI in component
import {Subject} from 'rxjs';
import {Injectable} from '@angular/core';

@Injectable()
export class HttpCancelService{
  private cancelPendingRequestSubject=new Subject<void>()
  cancelPendingRequest$ = this.cancelPendingRequestSubject.asObservable();

  cancelPendingRequest(){
    this.cancelPendingRequestSubject.next();
  }
}

==============================================================
//http-cancel-interceptor.service.ts
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable, takeUntil} from 'rxjs';
import {Injectable} from '@angular/core';
import {HttpCancelService} from './http-cancel.service';
import {tap} from 'rxjs/operators';

@Injectable()
export class CancelInterceptor implements HttpInterceptor{
  constructor(private cancelService: HttpCancelService) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(takeUntil(this.cancelService.cancelPendingRequest$
      .pipe(tap(()=> {throw new Error('Request is canceled')}))));
  }
}
==============================================================
 // app.module.ts
  import {HTTP_INTERCEPTORS} from '@angular/common/http';
  ...
  providers: [
    ...
    {provide: HTTP_INTERCEPTORS, useClass: CancelInterceptor, multi: true}
    ...
  ],

Similar codes

0 vote280 views1 answer
> Could not find method classpath() for arguments [org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.10] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
TypeScript
1 vote295 views3 answers
Linux split mp4 into 2 parts by time
TypeScript
1 vote318 views1 answer
How to generate uuid in typescript
TypeScript
1 vote277 views1 answer
Typescript
TypeScript
1 vote266 views1 answer
How to move data between request
TypeScript
0 vote298 views1 answer
How does a consumer commit offsets in Kafka? it directly commit the offset in Zookeeper it directly send a message to the __consumer_offset it interact with the Group coordinator None
TypeScript
2 votes290 views2 answers
Nodejs aws s3 upload
TypeScript
15 votes287 views5 answers
Npm bcrypt
TypeScript
0 vote287 views1 answer
UpdateTable operation with the GlobalSecondaryIndexUpdates parameter
TypeScript
3 votes362 views3 answers
Get first day of month javascript moment
TypeScript