Angular8 Http攔截器簡(jiǎn)單使用教程
攔截器
Http攔截器就是攔截發(fā)出的請(qǐng)求,對(duì)其進(jìn)行統(tǒng)一添加額外處理,然后放行;對(duì)響應(yīng)進(jìn)行攔截并作出業(yè)務(wù)上的判斷,決定是否給與返回。
先看一組常見(jiàn)的業(yè)務(wù)請(qǐng)求:
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
});
可以看出有些配置是幾乎所有請(qǐng)求都共通得,有的需要token等參數(shù),一個(gè)項(xiàng)目全部手動(dòng)寫(xiě)得話,第一容易漏寫(xiě),第二以后如果有改動(dòng),需要所有接口都調(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>> {
// 先補(bǔ)全請(qǐng)求協(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;
}
// 過(guò)濾掉不需要token的請(qǐng)求
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)錯(cuò)誤頁(yè)面
}
}
},
error => {
// token過(guò)期 服務(wù)器錯(cuò)誤等處理
})
);
}
}
組件:
getTemp() {
this.http.post('172.16.10.161:3000/table', {
params: {
pageSize: 10,
pageIndex: 1
}
}).subscribe(res => {
console.log(res);
});
}
該攔截器實(shí)現(xiàn)的功能比較簡(jiǎn)單,但是結(jié)構(gòu)算是完整的,和管道類(lèi)似,想應(yīng)用此攔截器需要注入在app模塊,
在providers數(shù)組種添加
{ provide: HTTP_INTERCEPTORS, useClass: CommonInterceptor, multi: true }
攔截器根據(jù)業(yè)務(wù)復(fù)雜度,其內(nèi)容也隨著復(fù)雜,通常管理下共通的配置,核心是處理各類(lèi)異常,甚至錯(cuò)誤碼處理。
總結(jié)
以上所述是小編給大家介紹的Angular8 Http攔截器簡(jiǎn)單使用教程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
AngularJS實(shí)現(xiàn)自定義指令及指令配置項(xiàng)的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)自定義指令及指令配置項(xiàng)的方法,結(jié)合實(shí)例形式簡(jiǎn)單總結(jié)分析了AngularJS自定義指令及指令配置項(xiàng)的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-11-11
AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
AngularJS入門(mén)教程之ng-checked 指令詳解
本文主要講解AngularJS ng-checked 指令,在這整理ng-checked 指令的基礎(chǔ)知識(shí),并附代碼實(shí)例,有需要的小伙伴可以參考下2016-08-08
如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項(xiàng)目詳解
Angular4.0來(lái)了,更小,更快,改動(dòng)少,所以下面這篇文章主要給大家介紹了關(guān)于Angular 4環(huán)境準(zhǔn)備與學(xué)會(huì)使用Angular cli創(chuàng)建項(xiàng)目的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),需要的朋友們下面來(lái)一起看看吧。2017-05-05
Angular ng-repeat 對(duì)象和數(shù)組遍歷實(shí)例
這篇文章主要介紹了Angular ng-repeat對(duì)象和數(shù)組遍歷的相關(guān)資料,并附代碼示例,需要的朋友可以參考下2016-09-09

