How use async service into angular httpClient interceptor

Question

Using Angular 4.3.1 and HttpClient, I need to modify the request and response by async service into the HttpInterceptor of httpClient,

Example for modifying the request:

export class UseAsyncServiceInterceptor implements HttpInterceptor {

  constructor( private asyncService: AsyncService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // input request of applyLogic, output is async elaboration on request
    this.asyncService.applyLogic(req).subscribe((modifiedReq) => {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
    /* HERE, I have to return the Observable with next.handle but obviously 
    ** I have a problem because I have to return 
    ** newReq and here is not available. */
  }
}

Different problem for the response, but I need again to applyLogic in order to update the response. In this case, the angular guide suggests something like this:

return next.handle(req).do(event => {
    if (event instanceof HttpResponse) {
        // your async elaboration
    }
}

But the "do() operator—it adds a side effect to an Observable without affecting the values of the stream".

Solution: the solution about request is shown by bsorrentino (into accepted answer), the solution about response is the follow:

return next.handle(newReq).mergeMap((value: any) => {
  return new Observable((observer) => {
    if (value instanceof HttpResponse) {
      // do async logic
      this.asyncService.applyLogic(req).subscribe((modifiedRes) => {
        const newRes = req.clone(modifiedRes);
        observer.next(newRes);
      });
    }
  });
 });

Therefore, how modify request and response with async service into the httpClient interceptor?

Solution: taking advantage of rxjs

yottabrain · Accepted Answer · 2024-03-27 11:14:59Z

74

If you need to invoke an async function within interceptor then the following approach can be followed using the rxjs from operator.

import { MyAuth} from './myauth'
import { from, lastValueFrom } from "rxjs";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private auth: MyAuth) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // convert promise to observable using 'from' operator
    return from(this.handle(req, next))
  }

  async handle(req: HttpRequest<any>, next: HttpHandler) {
    // if your getAuthToken() function declared as "async getAuthToken() {}"
    const authToken = await this.auth.getAuthToken()

    // if your getAuthToken() function declared to return an observable then you can use
    // const authToken = await lastValueFrom(this.auth.getAuthToken())

    const authReq = req.clone({
      setHeaders: {
        Authorization: authToken
      }
    })

    return lastValueFrom(next.handle(req));
  }
}

edited Mar 27, 2024 at 11:14

answered Aug 29, 2019 at 14:14

yottabrain

2,6455 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GianPierre Gálvez Over a year ago

It works perfect. Also, I have added pipe handle before .toPromise() and all still working awesome. Thanks you.

Gabriel García Garrido Over a year ago

Its not working for me . Check stackoverflow.com/questions/69665366/…

LuscaDev Over a year ago

.toPromise() is deprecated so use return await lastValueFrom(next.handle(req));

Abraham Putra Prakasa Over a year ago

where and how is authToken variable assigned?

bsorrentino · Accepted Answer · 2020-01-16 12:36:30Z

15

I think that there is a issue about the reactive flow. The method intercept expects to return an Observable and you have to flatten your async result with the Observable returned by next.handle

Try this

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return this.asyncService.applyLogic(req).mergeMap((modifiedReq)=> {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
}

You could also use switchMap instead of mergeMap

edited Jan 16, 2020 at 12:36

answered Jul 31, 2017 at 11:15

bsorrentino

1,67113 silver badges23 bronze badges

2 Comments

Ahmad Shahwan Over a year ago

I'm using Angular 8, and methods flatMap() and switchMap() are not avalable on my observable (returned by Store.slecte()).

bsorrentino Over a year ago

in your case you have to replace flatMap with mergeMap

Kent Munthe Caspersen · Accepted Answer · 2019-09-18 19:14:21Z

I am using an async method in my interceptor like this:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    public constructor(private userService: UserService) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return from(this.handleAccess(req, next));
    }

    private async handleAccess(req: HttpRequest<any>, next: HttpHandler):
        Promise<HttpEvent<any>> {
        const user: User = await this.userService.getUser();
        const changedReq = req.clone({
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'X-API-KEY': user.apiKey,
            })
        });
        return next.handle(changedReq).toPromise();
    }
}

Volodymyr Kr · Accepted Answer · 2018-06-13 07:15:19Z

6

Asynchronous operation in HttpInterceptor with Angular 6.0 and RxJS 6.0

auth.interceptor.ts

import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/index';;
import { switchMap } from 'rxjs/internal/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private auth: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return this.auth.client().pipe(switchMap(() => {
        return next.handle(request);
    }));

  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class AuthService {

  constructor() {}

  client(): Observable<string> {
    return new Observable((observer) => {
      setTimeout(() => {
        observer.next('result');
      }, 5000);
    });
  }
}

edited Jun 13, 2018 at 7:15

answered Jun 1, 2018 at 15:10

Volodymyr Kr

611 silver badge2 bronze badges

2 Comments

Ignacio Ara Over a year ago

Please explain your lines of code so other users can understand its functionality. Thanks!

webpreneur Over a year ago

In a real time environment do not forget to call observer.error() and define the cleanup logic in the returned unsubscribe() function. There is a nice example of this at angular.io's Observable Guide.

Tofiq Quadri · Accepted Answer · 2019-03-14 13:42:38Z

The answers above seem to be fine. I had same requirements but faced issues due to update in different dependencies and operators. Took me some time but I found one working solution to this specific issue.

If you are using Angular 7 and RxJs version 6+ with requirements for Async Interceptor request then you can use this code which works with latest version of NgRx store and related dependencies:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    let combRef = combineLatest(this.store.select(App.getAppName));

    return combRef.pipe( take(1), switchMap((result) => {

        // Perform any updates in the request here
        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log('event--->>>', event);
                }
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                let data = {};
                data = {
                    reason: error && error.error.reason ? error.error.reason : '',
                    status: error.status
                };
                return throwError(error);
            }));
    }));

Feargal Kavanagh · Accepted Answer · 2023-05-15 16:43:04Z

Here's my solution in Angular 15, its for where I needed to modify all responses. Posting as it took me longer than I'd like to admit in order to get this working.

I use Nswag to generate request / response types and Mediatr on the API side. I have a generic response class with success & proceed bools. Every api call responds with these. This setup allows me to have tonnes of control, and makes the handling of errors and stuff neater when using toastr.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse, HttpStatusCode } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Utilities } from "somewhere";
import { ToastrService } from "ngx-toastr";
import { from, lastValueFrom, map } from "rxjs";

@Injectable()
export class ResponseHandlerInterceptor implements HttpInterceptor {
  constructor(public toastrService: ToastrService) { }

  intercept(req: HttpRequest<unknown>, next: HttpHandler) {
    return from(this.handle(req, next));
  }

  async handle(request: HttpRequest<any>, next: HttpHandler) {

    debugger;
    // request logic here, no access to response yet. 
    if (request.url == '/assets/config.dev.json') {

      // await async call
      let config = await lastValueFrom(Utilities.someFunctionWhichReturnsObservable());

      // can modify request after async call here, like add auth or api token etc.

      const authReq = request.clone({
        setHeaders: {
          Authorization: config.API_Token
        }
      })
    }

    return await lastValueFrom(next.handle(request).pipe(map(async response => {

      //response logic here, have access to both request & response

      if (response instanceof HttpResponse<any> && response.body instanceof Blob && response.body.size > 0) {

        // await async call
        let responseBody = await lastValueFrom(Utilities.readFile(response.body)) as string;

        //can modify response or do whatever here, i trigger toast notifications & possibly override status code 

        if (request.url.includes('/api/') && response.body.type === "application/json") {
          let genericResponse = JSON.parse(responseBody) as IGenericResponse<any>;

          if (genericResponse.success == false) {
            if (genericResponse.proceed == false) {
              this.toastrService.error(genericResponse.errorMessage, null, { progressBar: true, timeOut: 29000 });

              let responseOverride = {
                ...response,
                status: HttpStatusCode.InternalServerError
              }

              return responseOverride as HttpEvent<any>;
            }
          }
        } else if (response.body.type === "text/plain") {
          console.log(responseBody);
        }

      }

      return response;
    })));
  }
}

Ghulam Mohayudin · Accepted Answer · 2017-07-27 10:25:20Z

-2

Ok i am updating my answer, You cannot update the request or response in an asynchronous service, you have to update the request synchronously like this

export class UseAsyncServiceInterceptor implements HttpInterceptor {

constructor( private asyncService: AsyncService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // make apply logic function synchronous
  this.someService.applyLogic(req).subscribe((modifiedReq) => {
    const newReq = req.clone(modifiedReq);
    // do not return it here because its a callback function 
    });
  return next.handle(newReq); // return it here
 }
}

edited Jul 27, 2017 at 10:25

answered Jul 27, 2017 at 8:45

Ghulam Mohayudin

1,11310 silver badges20 bronze badges

2 Comments

Pasquale Vitale Over a year ago

i need async service as specified into the question and not the synchronous function as you propose. Are you sure about this affirmation: You cannot update the request or response in an asynchronous service ?

Ghulam Mohayudin Over a year ago

I am pretty sure because your request will be posted to server when it is being updated by your async service, same will happen to response response will be returned before the async service changes it

muhammad hasnain · Accepted Answer · 2017-07-27 11:57:30Z

-5

If I get your question right than you can intercept your request using deffer

   

module.factory('myInterceptor', ['$q', 'someAsyncService', function($q, someAsyncService) {  
    var requestInterceptor = {
        request: function(config) {
            var deferred = $q.defer();
            someAsyncService.doAsyncOperation().then(function() {
                // Asynchronous operation succeeded, modify config accordingly
                ...
                deferred.resolve(config);
            }, function() {
                // Asynchronous operation failed, modify config accordingly
                ...
                deferred.resolve(config);
            });
            return deferred.promise;
        }
    };

    return requestInterceptor;
}]);
module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('myInterceptor');
}]);

edited Jul 27, 2017 at 11:57

answered Jul 27, 2017 at 11:32

muhammad hasnain

5014 silver badges16 bronze badges

7 Comments

Ghulam Mohayudin Over a year ago

Deferring a request means you are not doing an async operation, it will stop the request perform the operation and then forward it

muhammad hasnain Over a year ago

hehehe.......... deffering a request means giving your responsibility to $q.deffer

Pasquale Vitale Over a year ago

you are talking about angularjs, the post is related to angular 4

muhammad hasnain Over a year ago

github.com/NgSculptor/ng2HttpInterceptor/blob/master/src/app/… you can refer this document if it helps you

Pasquale Vitale Over a year ago

@muhammad hasnain, i used the approach suggested by you into my old project (angular 1.5), but it seems that angular 4 with httpClient is not able to do the same capability. The purpose of this question is to understand if angular 4 with httpClient have this limitation.

|

Collectives™ on Stack Overflow

How use async service into angular httpClient interceptor

8 Answers 8

4 Comments

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

2 Comments

Comments

2 Comments

Comments

Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related