Angular8 Http攔截器簡單使用教程
攔截器
Http攔截器就是攔截發(fā)出的請求,對其進行統(tǒng)一添加額外處理,然后放行;對響應(yīng)進行攔截并作出業(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)整,不利于維護,最理想得狀態(tài)就是只修改參數(shù)和api地址,其他得交給特別得機制去處理,這就引出了今天的主角-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)控制器之間通信方式實例總結(jié)
這篇文章主要介紹了Angularjs實現(xiàn)控制器之間通信方式,結(jié)合實例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項,需要的朋友可以參考下2018-03-03Angualrjs和bootstrap相結(jié)合實現(xiàn)數(shù)據(jù)表格table
這篇文章主要介紹了Angualrjs和bootstrap相結(jié)合實現(xiàn)數(shù)據(jù)表格table,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器
在AngularJS中,控制器是一個Javascript函數(shù)(類型/類),用來增強除了根作用域意外的作用域?qū)嵗?。當你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個新的子作用域?qū)ο髸r,有一個選項能讓你將它當做參數(shù)傳遞給控制器。2015-05-05AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達式
AngularJS表達式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達式都寫在雙括號就像{{表達式}}。表達式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達式是純javascript表達式,并輸出它們被使用的數(shù)據(jù)在那里。2015-05-05詳解Angular組件數(shù)據(jù)不能實時更新到視圖上的問題
這篇文章主要為大家介紹了Angular組件數(shù)據(jù)不能實時更新到視圖上的問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04