在现代 Web 应用程序中，Restful API 已成为前后端交互的标准方式之一。在 Angular 中，我们可以通过一些基本的步骤来调用 Restful API。
准备工作
在开始之前，我们需要先安装 Angular CLI，并创建一个新的 Angular 项目。
--- ------- -- ------------ -- --- ------ -- ------
接下来，我们需要安装一些必要的依赖，包括 @angular/common/http 和 rxjs。
--- ------- -------------------- ---- ------
创建服务
在 Angular 中，我们通常会使用服务来封装对 Restful API 的调用。我们可以通过 Angular CLI 快速生成一个服务。
-- -------- ------- ---
这将在 src/app 目录下创建一个名为 api.service.ts 的文件。我们可以在这个文件中实现对 Restful API 的调用。
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------- -
------- ------ - --------------------------
------------------- ----- ----------- --
------------- -------- --------------- -
------ --------------------------------------------
-
-------------- ------- ----- ----- --------------- -
------ -------------------------------------------- ------
-
------------- ------- ----- ----- --------------- -
------ ------------------------------------------- ------
-
---------------- -------- --------------- -
------ -----------------------------------------------
-
-在上面的代码中，我们定义了一个名为 ApiService 的服务类，其中包含了 get、post、put 和 delete 四个方法，分别对应 HTTP 请求中的 GET、POST、PUT 和 DELETE 方法。我们通过 HttpClient 来发起 HTTP 请求，并返回一个 Observable 对象。
调用 API
在我们已经创建好了 ApiService 服务之后，我们可以在组件中使用它来调用 Restful API。
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------
------------
--------- -----------
--------- -
------- ----------------------- -------------
----- ---- ------
-
--
------ ----- ------------ -
----- ----
------------------- ----------- ----------- --
--------- -
------------------------------------------------ -- -
--------- - ---------
---
-
-在上面的代码中，我们在 AppComponent 组件中注入了 ApiService 服务，并在 getData 方法中调用了 get 方法来获取数据。当 HTTP 请求返回数据后，我们将响应数据赋值给 data 属性，并在模板中显示出来。
总结
通过上面的步骤，我们可以很容易地在 Angular 中调用 Restful API。我们可以将所有的 HTTP 请求封装在一个服务中，并在组件中使用它来获取数据。这样做的好处是可以提高代码的可维护性和复用性，同时也可以避免代码重复。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d6fdd91886fbafa4495dda