Angular 是一个流行的前端框架，它提供了丰富的功能和工具来开发现代化的 Web 应用程序。其中一个重要的功能是调用 API，以便从服务器获取数据或与后端进行交互。在本文中，我们将探讨 Angular 中调用 API 的方法，并提供详细的指导和示例代码。
使用 HttpClient
Angular 提供了一个名为 HttpClient 的模块，它是一个 HTTP 客户端库，用于与服务器进行通信。它支持各种 HTTP 请求方法，如 GET、POST、PUT、DELETE 等，并提供了丰富的配置选项和拦截器功能。
要使用 HttpClient，我们需要先在应用程序中导入它：
------ - ---------- - ---- -----------------------
然后，我们可以在组件或服务中注入 HttpClient，并使用它来发出 HTTP 请求。例如，以下代码演示了如何使用 HttpClient 发出一个 GET 请求：
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
------------------- ----- ----------- - -
----------- ---- -
----------------------------------------- -- -
------------------
---
-
-在上面的代码中，我们注入了 HttpClient，并在 ngOnInit 方法中使用它来发出一个 GET 请求，该请求将请求 URL 设置为 /api/data。我们还订阅了请求的结果，以便在响应到达时处理数据。
处理响应
当我们调用 HttpClient 发出请求时，它会返回一个 Observable 对象，该对象可以订阅以获取响应。响应对象包含一个 status 属性，表示响应的状态码，以及一个 body 属性，表示响应体的内容。
通常情况下，我们需要将响应体转换为我们可以使用的格式，例如 JSON 对象。为此，我们可以使用 HttpClient 的 get 方法的第二个参数，该参数是一个配置对象，用于指定响应的类型。例如，以下代码演示了如何将响应体转换为 JSON 对象：
-------------------------- - ------------- ------ ----------------- -- - ------------------ ---
在上面的代码中，我们将 responseType 设置为 'json'，以便将响应体解析为 JSON 对象。我们还可以将其设置为 'text'、'blob' 或 'arraybuffer'，以便解析不同类型的响应体。
处理错误
当调用 API 发生错误时，我们需要能够捕获并处理它们。为此，我们可以使用 HttpClient 的 catchError 操作符，它允许我们捕获错误并返回一个新的 Observable 对象。
例如，以下代码演示了如何处理一个 GET 请求的错误：
------ - ---------- ------ - ---- ----------------
------ - ----------- ----------------- - ---- -----------------------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
------------------- ----- ----------- - -
----------- ---- -
--------------------------------
------------------ ------------------ -- -
-------------------
------ --------------------- ---- --------
--
---------------- -- -
------------------
---
-
-在上面的代码中，我们使用 catchError 操作符捕获了错误，并返回一个新的 Observable 对象，该对象发出一个错误消息。我们还将错误记录到控制台中，以便进行调试和故障排除。
使用拦截器
拦截器是 HttpClient 提供的强大功能之一，它允许我们拦截和修改 HTTP 请求和响应。拦截器可以用于添加身份验证令牌、修改请求头、缓存响应等。
要使用拦截器，我们需要创建一个实现 HttpInterceptor 接口的类，并在应用程序中提供它。例如，以下代码演示了如何创建一个拦截器，该拦截器向请求头中添加一个身份验证令牌：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
------------------ ----------------- ----- ------------ -
----- ----- - -----------------------------------
-- ------- -
----- ----------- - ---------------
-------- ------------------------------------ ------- ----------
---
------ -------------------------
- ---- -
------ ---------------------
-
-
-在上面的代码中，我们创建了一个名为 AuthInterceptor 的拦截器，它会检查本地存储中是否存在名为 auth_token 的令牌。如果存在，它将复制请求并向请求头中添加一个身份验证令牌。否则，它将直接传递原始请求。
要在应用程序中使用拦截器，我们需要在 AppModule 中提供它。例如，以下代码演示了如何提供 AuthInterceptor：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- -
- -------- ------------------ --------- ---------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们使用 HTTP_INTERCEPTORS 令牌提供了 AuthInterceptor，以便它可以被 HttpClient 使用。我们还使用 multi: true 选项，以便我们可以提供多个拦截器。
总结
在本文中，我们探讨了 Angular 中调用 API 的方法，并提供了详细的指导和示例代码。我们介绍了如何使用 HttpClient 发出 HTTP 请求、如何处理响应和错误、以及如何使用拦截器。这些技术对于开发现代化的 Web 应用程序非常重要，希望本文能够帮助读者更好地理解和应用它们。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657ecd47d2f5e1655d9ac00f