攔截器

Http攔截器就是攔截發(fā)出的請求，對其進(jìn)行統(tǒng)一添加額外處理，然后放行；對響應(yīng)進(jìn)行攔截并作出業(yè)務(wù)上的判斷，決定是否給與返回。

先看一組常見的業(yè)務(wù)請求：

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

可以看出有些配置是幾乎所有請求都共通得，有的需要token等參數(shù)，一個項目全部手動寫得話，第一容易漏寫，第二以后如果有改動，需要所有接口都調(diào)整，不利于維護(hù)，最理想得狀態(tài)就是只修改參數(shù)和api地址，其他得交給特別得機(jī)制去處理，這就引出了今天的主角-HttpInterceptor

定義攔截器

按照官方約定，文件應(yīng)該是以‘.interceptor.ts'作為后綴

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<any>, next: HttpHandler): Observable<HttpEvent<any>> {  // 先補全請求協(xié)議  let url = req.url;  const needToken = ignoreToken.filter(u => url.match(u));  if (url.indexOf('http://') < 0 || url.indexOf('https://') < 0) {   url = 'http://' + url;  }  // 過濾掉不需要token的請求  if (!needToken.length) {   req = req.clone({    url   });  } else {   req = req.clone({    url,    headers: req.headers.set('token', 'asdqwe')   });  }  return next.handle(req).pipe(   tap(    event => {     if (event instanceof HttpResponse) {      console.log(event);      if (event.status >= 500) {       // 跳轉(zhuǎn)錯誤頁面      }     }    },    error => {     // token過期 服務(wù)器錯誤等處理    })  ); }}

組件：

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

該攔截器實現(xiàn)的功能比較簡單，但是結(jié)構(gòu)算是完整的，和管道類似，想應(yīng)用此攔截器需要注入在app模塊，

在providers數(shù)組種添加

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

攔截器根據(jù)業(yè)務(wù)復(fù)雜度，其內(nèi)容也隨著復(fù)雜，通常管理下共通的配置，核心是處理各類異常，甚至錯誤碼處理。

總結(jié)

以上所述是小編給大家介紹的Angular8 Http攔截器簡單使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！