DEV Community

Cover image for Angular: Understanding how interceptors act on HttpRequest and HttpResponse
Andrei Gatej
Andrei Gatej

Posted on

Angular: Understanding how interceptors act on HttpRequest and HttpResponse

#angular #typescript #javascript #webdev

You can find a working example here.

Generalization

Assuming that a request will be intercepted by these interceptors:

@NgModule({ /* ... */ providers: [ { provide: HTTP_INTERCEPTORS, useClass: Interceptor1 multi: true, }, { provide: HTTP_INTERCEPTORS, useClass: Interceptor2 multi: true, }, /* ... */ { provide: HTTP_INTERCEPTORS, useClass: InterceptorN multi: true, } ] /* ... */ })
Enter fullscreen mode Exit fullscreen mode

When you perform a request by using HttpClient, the provided interceptors will act symmetrically on the whole action(HttpRequest & HttpResponse).

This means that the actual request(HttpRequest) will be intercepted by the interceptors in this order:

INTERCEPTOR_1 -> INTERCEPTOR_2 -> INTERCEPTOR_3 -> ... -> INTERCEPTOR_n
Enter fullscreen mode Exit fullscreen mode

whereas, the path of the response(HttpResponse) will be this:

INTERCEPTOR_n -> ... -> INTERCEPTOR_3 -> INTERCEPTOR_2 -> INTERCEPTOR_1
Enter fullscreen mode Exit fullscreen mode

Alt Text

A practical example

Supposing you have these interceptors:

{ type: 0 } - the request has been dispatched to the backend

export class FooInterceptor implements HttpInterceptor { intercept (req: HttpRequest<any>, next: HttpHandler) { console.log('[FOO]: request! ') return next.handle(req) .pipe( // Skip `sent` event filter(e => e.type !== 0), tap((e) => console.log('[FOO]: response!', e)), ); } }
Enter fullscreen mode Exit fullscreen mode 
export class BarInterceptor implements HttpInterceptor { intercept (req: HttpRequest<any>, next: HttpHandler) { console.log('[BAR]: request! ') return next.handle(req) .pipe( // Skip `sent` event filter(e => e.type !== 0), tap((e) => console.log('[BAR]: response!', e)), ); } }
Enter fullscreen mode Exit fullscreen mode 
export class BazInterceptor implements HttpInterceptor { intercept (req: HttpRequest<any>, next: HttpHandler) { console.log('[BAZ]: request! ') return next.handle(req) .pipe( // Skip `sent` event filter(e => e.type !== 0), tap((e) => console.log('[BAZ]: response!', e)), ); } }
Enter fullscreen mode Exit fullscreen mode

After dispatching an HTTP request, this will be printed to the console:

[FOO]: request! [BAR]: request! [BAZ]: request! [BAZ]: response! HttpResponse { … } [BAR]: response! HttpResponse { … } [FOO]: response! HttpResponse { … } {userId: 1, id: 1, title: "delectus aut autem", completed: false…}
Enter fullscreen mode Exit fullscreen mode

I hope you found this useful. Thanks for reading! :)

Top comments (0)