需求描述

前臺需要請求后臺的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 拦截器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。