Angular 5 自带的 HttpClient 可以让我们便捷地进行 HTTP 请求，从而与后台通信。在这篇文章中，我们将会深入了解 HttpClient 的用法。
创建 HttpClient 实例
首先，我们需要通过依赖注入来创建 HttpClient 实例。要创建 HttpClient 实例，我们需要导入 HttpClientModule 模块。
import { HttpClientModule } from '@angular/common/http';在 AppModule 中导入 HttpClientModule，并把它添加到 imports 数组中。
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})然后，在我们的组件中，我们可以通过构造函数注入 HttpClient。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- ----- ----------- -- -
现在我们已经成功创建了一个 HttpClient 实例，可以开始使用它来进行 HTTP 请求了。
发送 GET 请求
要发送一个 GET 请求，可以使用 HttpClient 的 get 方法。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
--------- ---- -
------- -------
--- -------
------ -------
----- -------
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ -------
------------------- ----- ----------- -
-------------------------------------------------------------------
---------------- -- -
---------- - ------
---
-
-在上面的代码中，我们首先定义了一个接口 Post，来声明从服务器返回的 JSON 数据的类型。
然后，在构造函数中，我们使用 HttpClient 的 get 方法来请求 https://jsonplaceholder.typicode.com/posts 这个 URL。由于我们知道服务器返回的是一个 Post 数组，所以我们在 get 方法的参数中传入了一个类型参数 Post[]。
接着，我们在 subscribe 回调函数中对返回结果进行了处理，把返回结果赋值给了我们的组件变量 posts。
发送 POST 请求
要发送一个 POST 请求，可以使用 HttpClient 的 post 方法。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
--------- ---- -
----- -------
------ -------
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- -----
------------------- ----- ----------- --
---------- -
----- - ----- ----- - - ----------
------------------------------------------------------------------ -
-----
-----
----------------- -- -
--------- - -----
---
-
-在上面的代码中，我们首先定义了一个接口 User，来声明我们要发送的数据的类型。
然后，在组件中，我们定义了一个 onSubmit 方法，在该方法中，我们从组件变量中获取用户输入的数据，然后使用 HttpClient 的 post 方法来发送请求。post 方法的第二个参数是我们要发送的数据，它必须是 JSON 格式的对象。
最后，我们在 subscribe 回调函数中对返回结果进行了处理，把返回结果赋值给了我们的组件变量 user。
发送其它类型的请求
HttpClient 还支持发送其它类型的请求，如 PUT、DELETE 等。要发送这些类型的请求，可以使用对应的方法，如 put、delete 等。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----------- --
------------ -
----- ------ - --
----- ---- - - ----- ------ --
--------------------------------------------------------------------- -----
------------- -- ------------------------
-
------------ -
----- ------ - --
------------------------------------------------------------------------
------------- -- ------------------------
-
-在上面的代码中，我们分别定义了两个方法 updateUser 和 deleteUser。在 updateUser 方法中，我们发送了一个 PUT 请求，修改了 id 为 1 的用户姓名为 John。在 deleteUser 方法中，我们发送了一个 DELETE 请求，删除了 id 为 1 的用户。
发送请求时带上 Headers
有时候我们需要在请求时带上一些头信息，如授权信息、 Content-Type 等。要在请求时带上 Headers，可以使用 HttpHeaders 类。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ----------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----------- --
--------- -
----- ------- - --- -------------
---------------- ------- ----------
--------------- ------------------
---
------------------------------------------------------------- - ------- --
----------------- -- ---------------------
-
-在上面的代码中，我们首先定义了一个 HttpHeaders 对象，它包含了授权信息和 Content-Type。然后，在向服务器发送 GET 请求时，我们把 headers 对象作为第二个参数传入。
把请求响应转化成其它类型
有时候服务器返回的数据不是我们想要的类型，需要对请求响应进行转化。HttpClient 提供了一个 map 操作符，可以把请求响应转化成其它类型。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
--------- ---- -
----- -------
------ -------
-
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----------- --
-------------- -
-------------------------------------------------------------
--------- -- -------------------
---------------- -- --------------------
-
-在上面的代码中，我们向服务器发送了一个 GET 请求，并把返回的 JSON 数据转化成了 User 类型。然后，我们再把 User 类型中的 email 字段提取出来，并输出到控制台中。
捕获错误
在发送 HTTP 请求时，有时候会出现错误，如服务器返回 404 等。要处理这些错误，我们可以在 subscribe 中提供一个错误回调函数。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ----- ----------- --
--------- -
------------------------------------------------------------------
-----------
------ -- --------------------
----- -- --------------------
--
-
-在上面的代码中，我们向一个不存在的路径发送了一个 GET 请求，然后在 subscribe 中提供了一个错误回调函数，输出错误信息到控制台中。
结论
HttpClient 在 Angular 5 中是一个非常强大的工具，可以帮助我们轻松地与后台通信。在本文中，我们深入了解了 HttpClient 的用法，包括如何创建 HttpClient 实例、发送 GET 和 POST 请求、发送其它类型的请求、带 Headers 发送请求、转化请求响应类型以及捕获错误。这些知识点对于你成为一个优秀的 Angular 开发者都是非常重要的。
希望本文能够给你带来帮助，如果你有任何问题或建议，请在下方留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6750fe32050cf9039c18c7c5