Angular 中如何使用 HTTP 拦截器 - 教程

在 Angular 应用程序中，我们使用 HTTP 服务来从远程服务器获取数据，例如从 API 获取 JSON 数据。但有时候我们需要在每个 HTTP 请求之前或之后做一些操作，例如添加请求头、启用 CSRF 保护等。Angular 为我们提供了一个强大的功能，即 HTTP 拦截器。

本教程将深入介绍 Angular 中如何使用 HTTP 拦截器。我们将学习什么是 HTTP 拦截器，为什么需要它们，以及如何编写并应用它们。最后，我们将提供一个完整的示例，展示如何使用 HTTP 拦截器来添加初始令牌和错误处理。

什么是 HTTP 拦截器？

HTTP 拦截器是 Angular 提供的一种功能，用于在 HTTP 请求或响应发生时处理它们。它们允许拦截请求并为每个请求添加标头、显示 Loading 指示器、启用 CSRF 保护等操作。同样，它们还可以拦截响应并处理错误、重试请求等。

使用 HTTP 拦截器的最大好处之一是它们可以在整个应用程序中共享，这使得代码的可重用性大大增加。它们还可以减少重复的代码和错误处理，从而更好地组织 Angular 项目。

为什么需要 HTTP 拦截器？

HTTP 拦截器提供了以下几个优点：

  1. 可重用性：使用 HTTP 拦截器可以减少重复代码，因为拦截器可以在整个应用程序中共享。

  2. 便于管理：HTTP 拦截器使代码更易于管理，因为它们可以将应用程序逻辑分离到不同的中间件中，从而更好地组织 Angular 项目。

  3. 简化调试：HTTP 拦截器可以简化调试，因为它们为 HTTP 请求和响应提供了可观察的、易于调试的中间结果。

  4. 增强功能：HTTP 拦截器可以增强应用程序的功能，例如添加请求标头、启用 CSRF 保护和自动重试失败的请求等。

如何使用 HTTP 拦截器？

使用 HTTP 拦截器非常简单，只需遵循以下步骤：

  1. 创建 HTTP 拦截器

首先，我们需要创建一个 HTTP 拦截器类。该类应实现 Angular 的 HttpInterceptor 接口，该接口有两个方法：intercept() 和 handleRequest()。intercept() 方法会拦截 HTTP 请求和响应，并可以进行处理。handleRequest() 方法则用于处理 HTTP 请求，并为其添加标头等其他处理逻辑。

下面是一个简单的示例：

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

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

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

在上面的示例中，我们创建了一个名为 MyInterceptor 的 HTTP 拦截器类。在 intercept() 方法中，我们检查请求并为其添加一个请求标头。注意，我们使用 req.clone() 来克隆原始的 req 对象并添加 Authorization 标头。

  1. 注册 HTTP 拦截器

接下来，在应用程序中注册 HTTP 拦截器。我们可以将 HTTP 拦截器注册为 Angular 模块的提供者，或作为某个服务的提供者。在本例中，我们将其注册为应用程序级别的提供者。我们需要执行以下步骤：

首先，我们需要在 app.module.ts 文件中引入我们的 HTTP 拦截器类：

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

接下来，在 providers 数组中，我们需要添加以下代码：

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

在上面的代码中，我们使用 Angular 的 HTTP_INTERCEPTORS 令牌来让 Angular 知道我们正在添加 HTTP 拦截器。我们向 providers 数组添加了一个对象，该对象有三个属性：

  • provide：表示我们要添加的令牌，即 HTTP 拦截器标记。

  • useClass：表示我们要使用的类，即我们的 MyInterceptor 类。

  • multi：表示我们要添加多个提供者。在我们的情况下，值必须为 true。

  1. 应用 HTTP 拦截器

现在，我们已经创建和注册了 HTTP 拦截器，在应用程序中的每个 HTTP 请求发送时，它都会被拦截，然后我们可以添加标头、显示 Loading 指示器等。例如，在组件中使用 HttpClient 发送 HTTP 请求时，我们可以像这样使用拦截器：

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

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

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

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

在上面的代码中，我们创建了一个名为 AppComponent 的组件，并注入 HttpClient 服务。在 getData() 方法中，我们使用 HttpClient 发送 HTTP 请求。该请求将被我们的 HTTP 拦截器拦截，并在请求头中添加 Authorization 标头。

完整示例

让我们来看一个完整的示例，可以显示如何使用 HTTP 拦截器添加初始令牌和错误处理。

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

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

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

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

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

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

在上面的代码中，我们创建了一个名为 TokenInterceptor 的 HTTP 拦截器。在 intercept() 方法中，我们检查 localStorage 中是否有存储的令牌，如果有，则将其添加到请求头中。接下来，我们使用 RxJS 的 catchError() 操作符捕获任何 HTTP 错误，并对错误进行处理。在此示例中，我们检查 HTTP 响应状态，并在控制台中记录错误消息。

接下来，我们需要注册这个 HTTP 拦截器。我们可以在 app.module.ts 中使用以下代码：

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

最后，我们可以在组件中使用 HttpClient 发送 HTTP 请求：

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

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

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

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

在上面的代码中，我们使用 HttpClient 发送 HTTP 请求。该请求将被 TokenInterceptor 拦截，并添加 Authorization 标头。如果出现任何 HTTP 错误，将在控制台中记录错误消息。

总结

HTTP 拦截器是 Angular 的一个非常有用的功能，它提供了在 HTTP 请求和响应中插入中间件的方便方式。我们可以使用 HTTP 拦截器添加请求标头、启用 CSRF 保护，以及处理错误。我们已经详细介绍了如何使用 HTTP 拦截器，并提供了一个完整的示例代码，展示了如何添加初始令牌和处理错误。我们希望这篇文章可以帮助您更好地学习 Angular 中的 HTTP 拦截器。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664ebc18d3423812e4f4076d

阅读全文

精选内容

相关推荐

    暂无