Angular8 Http攔截器簡單使用教程
攔截器
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ù)大家的！
相關(guān)文章
AngularJS實現(xiàn)自定義指令及指令配置項的方法
這篇文章主要介紹了AngularJS實現(xiàn)自定義指令及指令配置項的方法,結(jié)合實例形式簡單總結(jié)分析了AngularJS自定義指令及指令配置項的實現(xiàn)技巧,需要的朋友可以參考下2017-11-11
AngulerJS學(xué)習(xí)之按需動態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動態(tài)加載文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文主要講解AngularJS ng-checked 指令,在這整理ng-checked 指令的基礎(chǔ)知識,并附代碼實例,有需要的小伙伴可以參考下2016-08-08
如何在Angular8.0下使用ngx-translate進(jìn)行國際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國際化配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
angular4自定義組件非input元素實現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了angular4自定義組件非input元素實現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Angular 主要分為八大構(gòu)造塊（也就是八個核心概念）：模塊、組件、模板、元數(shù)據(jù)、數(shù)據(jù)綁定、指令、服務(wù)、依賴注入。有興趣的可以了解一下2017-06-06
Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項目詳解
Angular4.0來了，更小，更快，改動少，所以下面這篇文章主要給大家介紹了關(guān)于Angular 4環(huán)境準(zhǔn)備與學(xué)會使用Angular cli創(chuàng)建項目的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-05-05
Angular ng-repeat 對象和數(shù)組遍歷實例
這篇文章主要介紹了Angular ng-repeat對象和數(shù)組遍歷的相關(guān)資料,并附代碼示例，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了AngularJS壓縮JS的操作技巧,分析了AngularJS進(jìn)行壓縮（minify）之后出現(xiàn)的問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-11-11
ngrx是一套利用RxJS的類庫，下面這篇文章主要給大家介紹了關(guān)于Angular X中使用ngrx的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07