A Simple Guide Into Interceptor and HTTPClient

Interfaces provide a cancellation request or unnecessary deletion/search mechanism. They are very similar to middleware Express texture content. Walker is very useful for features like caching and logging.

Basic Setup

The application implements HttpInterceptor to create an injection class for an attacker implementation. The blind method has two arguments, req, and others, and can be seen in the HttpEvent program.

Req is the request object itself and is type HttpRequest.

Another is the HTTP handler, type HttpHandler. Handler is the handle that HttpEvent wants to keep in mind.

At least performing interventions. The interfaces are used by the RxJS operator to record the request parameter for the filter parameter and to record the state of the event console. The operator has the following side effects: They are among them:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse }
  from '@angular/common/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    return next.handle(req).do(evt => {
      if (evt instanceof HttpResponse) {
        console.log('---> status:', evt.status);
        console.log('---> filter:', req.params.get('filter'));
      }
    });

  }
}

If you want to call us, use the application modules or the HTTP_INTERCEPTORS token module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './interceptors/my.interceptor';


@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Multiple interceptors

You can also define multiple feed interceptors as follows::

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
],

Invites participants to their order. Similarly, MyInterceptor first processes HTTP requests.

Modifying Requests

HttpRequest objects will not change, so first make a copy to change them. Copy the copy of the change and change the dial control. The cloning method of the request object is simple. A simple cross-section that filters the effects of search query filtering:

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const duplicate = req.clone({ params: req.params.set('filter', 'completed') });

    return next.handle(duplicate);
  }
}

Here's the last example that changed the word pizza to emoji. An independent request may return to the original request for another:

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.body) {
      const duplicate = req.clone({ body: req.body.replace(/pizza/gi, '??') });
      return next.handle(duplicate);
    }
    return next.handle(req);
  }
}

Thanks