Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Intercepting HTTP Calls

Intercepting HTTP Calls

Let's learn how Angular's RxJS integration lets you intercept and modify AJAX calls through 'HttpClient'.

We'll cover the following...

Interceptors

In addition to return types and JSON parsing, HttpClient introduces interceptors, which is a tool that exposes any AJAX request made in the application for modification.

Let’s add two of these:

  • One, a conditional retry service, attempts to intelligently rerun failed HTTP requests behind the scenes before the user sees an error state and manually retries.

  • The other listens in to every request and on an unreconcilable error, cleanly displays an error message (as opposed to a flow-breaking alert or a silent failure).

The first step to building an interceptor is to generate a service to hold that structure.

Generate a new service with ng g service retry-interceptor and open it. Modify it to add the following:

Press + to interact
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import {
  HttpResponse,
  HttpErrorResponse,
  HttpEvent,
  HttpInterceptor,
  HttpRequest,
  HttpHandler
} from '@angular/common/http'; // <callout id="co.ng2ajax.interceptors1"/>
@Injectable({
  providedIn: 'root'
})
export class RetryInterceptorService implements HttpInterceptor { // <callout id="co.ng2ajax.interceptors2"/>
  constructor() { }
  intercept(request: HttpRequest<any>, next: HttpHandler): // <callout id="co.ng2ajax.interceptors3"/>
    Observable<HttpEvent<any>> { 
  }
}

  • Line 10: There are a lot of imports from HTTP here, but don’t worry about ...