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

32 votes344 views1 answer
Ng : File C:\Users\nEW u\AppData\Roaming\npm\ng.ps1 cannot be loaded. The file C:\Users\nEW u\AppData\Roaming\npm\ng.ps1 is setting execution policy, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170. At line:1 char:1
TypeScript
1 vote339 views1 answer
Aws sqs create fifo queue
TypeScript
0 vote327 views1 answer
What types of troop advancements were involved, and why were both needed in dday
TypeScript
0 vote367 views1 answer
Scripts may close only the windows that were opened by them
TypeScript
0 vote307 views1 answer
What is the blood vessel that carries oxygenand nutrients to the heart muscle tissue itslef
TypeScript
1 vote316 views1 answer
Create npm module typescript
TypeScript
0 vote312 views1 answer
Pass data through router angular
TypeScript
1 vote302 views1 answer
Npx run ts file
TypeScript
1 vote322 views1 answer
Ts object field from variable
TypeScript
4 votes334 views1 answer
Push elements of array to another array typescript
TypeScript