攔截器
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),濱城企業(yè)網(wǎng)站建設(shè),濱城品牌網(wǎng)站建設(shè),網(wǎng)站定制,濱城網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,濱城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
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, next: HttpHandler): Observable> {
// 先補全請求協(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ù)大家的！
