angular 拦截器
生活随笔
收集整理的這篇文章主要介紹了
angular 拦截器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求描述
前臺需要請求后臺的API,然后在請求時API的樣式均有如下格式:
/api/...所以依照不寫重復代碼的原則,一種方法我們可以定義一個公共變量,另一種就是可以定義一個攔截器,然后在請求API之前,為路徑添加公共部分,再去請求。
angular中的攔截器
angular中要定義攔截器,需要實現HttpInterceptor接口,然后實現intercept()方法。
@Injectable() export class MyInterceptor implements HttpInterceptor {intercept(req: HttpRequest<any>, next: HttpHandler) {return next.handle(req);} }該方法接受了兩個參數。第一個我們通過名字一下子就看出來這個是什么意思:這是一個http請求,他是我們主要操作的對象。另一個參數是next,他表示攔截器鏈表中的下一個攔截器。也就是說他會將http請求傳遞給下一個攔截器。這個鏈表的最后一項就是后端處理器,所以最后用過next將請求傳給后臺處理。
然后我們的需求是在請求之前修改請求路徑,所以需要這么寫:
intercept(req: HttpRequest<any>, next: HttpHandler) {const cloneRequest = req.clone({url: `api/${req.url}` // 添加默認api訪問路徑});return next.handle(cloneRequest); }在angular中,如果想要修改請求,就需要調用它的clone方法,然后修改這個克隆體,最后將克隆體通過next對象,傳遞給下一個對象,或傳給后臺。
這里我只對url進行了修改,當然還可以處理請求中的其他方面。
官方參考:
https://angular.cn/guide/http...
https://angular.cn/api/common...
https://angular.cn/api/common...
總結
以上是生活随笔為你收集整理的angular 拦截器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 虚拟机VMware12下安装window
- 下一篇: LinkedList中查询(contai