在 Angular 中，使用 Http 模块是发送 HTTP 请求的常见做法。但是，在 Angular 4.3 后推出的 HttpClient 模块，不仅可以替代 Http 模块，更提供了更强大、更方便的功能，使发送 HTTP 请求变得更加容易。
HttpModule 的问题
在使用 Http 模块发送 HTTP 请求时，需要手动从 @angular/http 包中导入，然后将 HttpModule 作为应用的一个模块导入:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [HttpModule]
})
export class AppModule {}导入模块后，我们可以使用 Http 服务来发送 HTTP 请求。
-- -------------------- ---- -------
------ - ---- - ---- ----------------
-------------
----------- ------
--
------ ----- --------- -
------------------- ----- ----- --
--------- -
------ ---------------------------
-
-Http 模块的一个问题是，它需要手动处理 HTTP 响应。这意味着在订阅后，需要手动映射数据并对错误进行处理：
-- -------------------- ---- -------
------ - ----- -------- - ---- ----------------
-- ---
--------------------------
---------- --------- -- ----------- -- ------
-----------
---- -- ------------------
----- -- ------------------
--HttpClient 的优势
相比之下，使用 HttpClient 可以更轻松地发送 HTTP 请求，并避免手动处理响应。我们只需要导入 HttpClientModule 并将其添加到应用模块中:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [HttpClientModule]
})
export class AppModule {}有了 HttpClient，我们现在可以更简单地发送 HTTP 请求，而不必操心它的响应是否已被映射为 JSON 格式，也无需关注返回的响应对象是否包含头信息，因为 HttpClient 会自动映射响应数据为一个 JSON 对象：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-------------
----------- ------
--
------ ----- --------- -
------------------- ----- ----------- --
--------- -
------ ---------------------------
-
-正如我们所看到的，HttpClient 会返回一个 Observable 导致这是一个异步的通信，这样我们就可以使用观察者模式监控并处理所有响应数据，同时可以轻松处理 HTTP 响应错误，而无需手动嵌套多个 try/catch 语句：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
-- ---
--------------------------
-----------
------ -- ------------------
------- -- ------------------
--使用 HttpClient 的示例
下面是一个简单的示例，演示如何在 Angular 项目中使用 HttpClient 发送 HTTP 请求：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -------------------
--------- -
-------- ---------
----
--- ----------- ---- -- --------- ---------- -------
-----
-
--
------ ----- ----------- ---------- ------ -
------ ----- - ---
------------------- ----- ----------- --
---------- -
------------------------------------------------------------------
----------------- -- -
---------- - -----
---
-
-在这个示例中，我们首先导入 HttpClient，然后在 MyComponent 的 ngOnInit 钩子函数中发送 HTTP 请求，并将 items 数据绑定到模版中的列表元素。
总结
使用 HttpClient 替代 Http 模块，是我们可以在 Angular 项目中发送 HTTP 请求的更好方式。它提供了更简单和更可读的代码，同时也更强大和更灵活。如果你正在开发 Angular 项目，并使用 Http 模块发送 HTTP 请求，请尽早使用 HttpClient 替代它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472ae39968c7c53b004aefd