Let's take all, the earlier mentioned steps and create a real interceptor service. Imagine that all calls to a certain endpoint are directed to a JSON file or a dictionary. Doing so will create a mock behavior where you are able to ensure that all outgoing calls are intercepted, and in their place, you answer with suitable mock data. This will allow you to develop the API at your own pace while relying on mocked data. Let's dig a little deeper into this scenario.

Let's start off by creating our service. Let's call it MockInterceptor. It will need to implement the HttpInterceptor interface like so:

import { HttpInterceptor } from '@angular/common/http';

export class MockInterceptor implements HttpInterceptor {
  constructor() { }

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

To fulfil the contract of the interface, we need to have the method intercept() that takes a request and a next() handler as parameters. Thereafter, we need to ensure we return an Observable of HttpEvent type from the intercept() method. We have yet to write any logic in there, so this won't actually compile. Let's add some basic code in the intercept() method just to make it work, like so:

import { HttpInterceptor } from '@angular/common/http';

export class MockInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request);
    }
}

We added a call to next.handle(request), which means we take the incoming request and just pass it further in the pipeline. This code doesn't do anything useful, but it does compile and does teach us that whatever we do inside the intercept() method, we need to call next.handle() with a request object. 

Let's return to what we were trying to achieve in the first place—mocking an outgoing request. This means we want to replace the outgoing request with our request. To accomplish our mocking behavior, we need to do the following:

• Investigate our outgoing request and determine whether we want to answer with a mock or let it through
• Construct a mock response if we want to mock it
• Register our new interceptor with the providers for a module

Let's add some code to our intercept() method as follows:

import { HttpInterceptor } from '@angular/common/http';

export class MockInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.url.startsWith('/starwars') && request.method === 'GET') {
      const url = request.url;
      const newUrl = `data${url.substring('/starwars'.length)}.json`;
      const req = new HttpRequest('GET', newUrl);
      return next.handle(req);
    } else {
      return next.handle(request);
    }
  }
}

What we are essentially saying here is that we are trying to perform a GET request to something. /starwars will intercept it and instead respond with a JSON file. So, /starwars/ships would instead lead to us respond with ships.json and /starwars/planets would lead to planets.json. You get the idea; all other requests would be let through.

We have one more thing to do—tell our module this interceptor exists. We open up our module file and add the following:

@NgModule({
  imports: [BrowserModule, HttpClientModule]
  providers: [{ 
    provide: HTTP_INTERCEPTORS, 
    useClass: MockInterceptor, 
    multi: true }]
})