溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
攔截器
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攔截器簡單使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
