Angular 中如何使用拦截器

拦截器是一种可以拦截请求或响应并进行转换的机制。在 Angular 中，我们可以使用拦截器来对 HTTP 请求进行预处理或后处理，比如添加认证请求头、缓存数据等等。

创建拦截器

要创建一个拦截器，我们需要使用 HttpInterceptor 接口。一个最基本的拦截器，可以通过以下方式创建：

-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
------ - ---------- - ---- -------

-------------
------ ----- ----------------- ---------- --------------- -
  ------------------ ----------------- ----- ------------- -------------------------- -
    -- ------- ------- ------
    ------ --------------------- -- ----- ----------
  -
-

在拦截器中，我们可以通过 intercept 方法来拦截请求，并返回处理后的请求。我们可以在这里修改请求头、添加请求参数、缓存数据等等操作。

注：next 参数表示的是后续拦截器或最终请求的 observable。

注册拦截器

在我们创建好了拦截器之后，需要将其注册到应用中。我们可以通过 HTTP_INTERCEPTORS 令牌将拦截器注入到应用的 providers 中：

-- -------------------- ---- -------
------ - ----------------- ----------------- - ---- -----------------------

-----------
  -------- -------------------
  ---------- --
    -------- ------------------
    --------- ------------------
    ------ ----
  --
--
------ ----- --------- - -

在这里，我们传递了 HTTP_INTERCEPTORS 令牌，将 SimpleInterceptor 注册到了应用的 providers 中。其中，multi: true 表示我们想要添加多个拦截器。

多个拦截器的执行顺序

如果我们想要添加多个拦截器，那么这些拦截器的执行顺序是怎样的呢？答案是按照我们注册时的顺序执行的。

下面是一个多个拦截器的示例：

-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
------ - ---------- - ---- -------

-------------
------ ----- ------------------ ---------- --------------- -
  ------------------ ----------------- ----- ------------- -------------------------- -
    ------------------------------- ---------
    ----- ---------- - ----------------
    ------ -----------------------------
      --------- -- ------------------------------- ------- -------
    --
  -
-

-------------
------ ----- ------------------------ ---------- --------------- -
  ------------------ ----------------- ----- ------------- -------------------------- -
    ------------------------------------- ---------
    ----- ---------- - ---------------
      -------- ------------------------------------ ------- -------
    ---
    ------ -----------------------------
      --------- -- ------------------------------------- ------- -------
    --
  -
-

这里我们定义了两个拦截器，分别是 LoggingInterceptor 和 AuthorizationInterceptor，它们分别输出了日志信息。

我们可以按照以下顺序注册这两个拦截器：

-- -------------------- ---- -------
------ - ----------------- ----------------- - ---- -----------------------

-----------
  -------- -------------------
  ---------- -
    - -------- ------------------ --------- ------------------- ------ ---- --
    - -------- ------------------ --------- ------------------------- ------ ---- -
  -
--
------ ----- --------- - -

在这里，我们先将 LoggingInterceptor 注册进去，然后再将 AuthorizationInterceptor 注册进去。因此执行顺序是：

1. LoggingInterceptor before
2. AuthorizationInterceptor before
3. 最终请求
4. AuthorizationInterceptor after
5. LoggingInterceptor after

如果我们改变一下拦截器的注册顺序：

-- -------------------- ---- -------
------ - ----------------- ----------------- - ---- -----------------------

-----------
  -------- -------------------
  ---------- -
    - -------- ------------------ --------- ------------------------- ------ ---- --
    - -------- ------------------ --------- ------------------- ------ ---- -
  -
--
------ ----- --------- - -

那么执行顺序就变成了：

1. AuthorizationInterceptor before
2. LoggingInterceptor before
3. 最终请求
4. LoggingInterceptor after
5. AuthorizationInterceptor after

结语

使用拦截器可以方便地对请求或响应进行转换或拦截。通过本文，我们了解了如何创建拦截器、如何注册拦截器、以及多个拦截器的执行顺序。希望这篇文章能对前端开发的同学们有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6797472d504e4ea9bde5a310