攔截器
Http攔截器就是攔截發出的請求，對其進行統一添加額外處理，然后放行；對響應進行攔截并作出業務上的判斷，決定是否給與返回。
先看一組常見的業務請求：
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等參數，一個項目全部手動寫得話，第一容易漏寫，第二以后如果有改動，需要所有接口都調整，不利于維護，最理想得狀態就是只修改參數和api地址，其他得交給特別得機制去處理，這就引出了今天的主角-HttpInterceptor
定義攔截器
按照官方約定，文件應該是以‘.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>> { // 先補全請求協議 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) { // 跳轉錯誤頁面 } } }, error => { // token過期 服務器錯誤等處理 }) ); }}組件：
getTemp() { this.http.post('172.16.10.161:3000/table', { params: { pageSize: 10, pageIndex: 1 } }).subscribe(res => { console.log(res); }); }該攔截器實現的功能比較簡單，但是結構算是完整的，和管道類似，想應用此攔截器需要注入在app模塊，
在providers數組種添加
{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }攔截器根據業務復雜度，其內容也隨著復雜，通常管理下共通的配置，核心是處理各類異常，甚至錯誤碼處理。
總結
以上所述是小編給大家介紹的Angular8 Http攔截器簡單使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
