Angular 是一种流行的前端开发框架，它提供了一系列强大的功能，包括拦截器。拦截器是 Angular 中的一种服务，用于在 HTTP 请求和响应过程中拦截并处理这些请求和响应。
拦截器的作用
拦截器可以帮助我们处理 HTTP 请求和响应的一些问题，比如：
认证和授权：拦截器可以在请求过程中添加额外的认证信息，并在响应过程中进行授权验证。
错误处理：拦截器可以处理 HTTP 请求和响应的错误，并提供其它处理方式或错误信息。
缓存：拦截器可以缓存请求数据，并提供响应时的缓存数据。
实现方式
在 Angular 中，我们通常使用 HttpClient 来处理 HTTP 请求，而拦截器就是基于 HttpClient 的。具体实现过程如下：
创建一个拦截器服务：我们可以通过运行以下命令。创建一个拦截器服务：
ng generate service my-interceptor
实现拦截器接口：在创建服务之后，我们需要实现拦截器接口。拦截器接口包含了两个方法，分别是 intercept 和 handleError。其中 intercept 方法用于拦截 HTTP 请求和响应，handleError 方法用于处理 HTTP 请求和响应的错误。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------- ---------------- ------------ ------------ ------------- ------------------ - ---- ----------------------- ------ - ----------- ---------- - ---- ------- ------ - ---------- - ---- ----------------- ------------- ------ ----- ------------- ---------- --------------- - ---------- -------- ----------------- ----- ----------- -- -------------------------- - -- ---- ----- ----- - ------------------------------ -- ------- - ------- - --------------- -------- ------------------------------------ ------- - - ------- --- - -- ---- ------ -------------------------- ------------------ -- - -- ---- -- ------ ---------- ------------------ - -- ------------- -- ---- - -- ------ - - ------ ------------------ -- -- - -
展开代码注册拦截器：在实现拦截器接口之后，我们需要将其注册到应用中。可以在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- ------- ------ - ----------------- - ---- ----------------------- ------ - ------------- - ---- --------------------------- ----------- ------------- --------------- -------- --------------- ------------------ ---------- - - -------- ------------------ --------- -------------- ------ ----- -- -- ---------- --------------- -- ------ ----- --------- --
展开代码
示例代码
在处理 HTTP 请求和响应的过程中，拦截器可以提供很多额外的功能。下面是一个使用拦截器处理认证信息的示例代码：
auth.interceptor.ts
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------- ---------------- ------------ ------------ - ---- ----------------------- ------ - ----------- - ---- ----------------- ------ - ---------- - ---- ------- ------------- ------ ----- --------------- ---------- --------------- - ------------------- ------------ ------------ -- ---------- -------- ----------------- ----- ----------- -- -------------------------- - ----- --------- - ----------------------------------------- ----- ----------- - --------------- -------- ------------------------------------ ------- --------------- --- ------ ------------------------- - -展开代码
auth.service.ts
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------------- ----------- ------- -- ------ ----- ----------- - ------- -------- ------------------ - ---------------- ------------------------ ------ - ------ ---------------------------------------------- - ---------------------------- -------- ---- - --------------------------------------------- ------- - --------------------------- ---- - ------------------------------------------------- - -展开代码
通过使用拦截器，我们可以在每个 HTTP 请求中添加认证信息，而不需要手动的添加每个请求的头部信息。在实际应用中，我们可以使用类似这样的拦截器来处理其它类型的请求和响应。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bffeb6314edc26845fb154
