Angular8 Http Interceptor Simple Tutorial

Interceptor

The Http interceptor is to intercept the request issued, add additional processing to it, and then release it; intercept the response and make a business judgment to decide whether to return it.

Let’s first look at a set of common business requests:

('http://127.0.0.1:8080/api/getList', {
   header: {
    token: 'asdasdas'
   },
   observe: 'body',
   params: {
    pageSize: 10,
    pageIndex: 1
   },
   responseType: 'json',
   withCredentials: true
  });

It can be seen that some configurations are common to almost all requests, and some require parameters such as tokens. If a project is written manually, it is easy to miss it. Second, if there is any change in the future, all interfaces need to be adjusted, which is not conducive to maintenance. The ideal state is to only modify the parameters and API addresses, and the others must be handed over to a special mechanism to handle, which leads to today's protagonist-HttpInterceptor

Define an interceptor

According to the official agreement, the document should be suffixed with ‘.’

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
const ignoreToken = ['login', 'logout', 'table'];
@Injectable()
export class CommonInterceptor implements HttpInterceptor {
 intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  // Complete the request agreement first  let url = ;
  const needToken = (u =&gt; (u));
  if (('http://') &lt; 0 || ('https://') &lt; 0) {
   url = 'http://' + url;
  }
  // Filter out requests that do not require tokens  if (!) {
   req = ({
    url
   });
  } else {
   req = ({
    url,
    headers: ('token', 'asdqwe')
   });
  }
  return (req).pipe(
   tap(
    event =&gt; {
     if (event instanceof HttpResponse) {
      (event);
      if ( &gt;= 500) {
       // Jump the error page      }
     }
    },
    error =&gt; {
     // Token expires, server errors, etc.    })
  );
 }
}

Components:

getTemp() {
  ('172.16.10.161:3000/table', {
   params: {
    pageSize: 10,
    pageIndex: 1
   }
  }).subscribe(res => {
   (res);
  });
 }

The function implemented by this interceptor is relatively simple, but the structure is considered complete and similar to the pipeline. If you want to apply this interceptor, you need to inject it into the app module.

Add in providers array

{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }

The interceptor has complex content according to the business complexity and is usually a common configuration under management. The core is to handle various exceptions and even error code processing.

Summarize

The above is the simple tutorial on using Angular8 Http interceptor introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!