近年来，前端开发变得越来越复杂，特别是与后台通信的方面。没有一个优秀的库来支持这一方面的开发，很多开发者只能使用浏览器自带的 XMLHttpRequest 或者 JQuery 的 ajax 方法来实现与后台的通信。这种方法会让前端开发变得混乱，不易维护。Angular 5 发布了一个新的库来处理这一方面的问题，它是 HttpClient 。
HttpClient 概述
HttpClient 是 Angular 5 中用来处理和后台交互的库。它的 API 是面向流的，它支持 JSON 格式的数据以及类型，还能处理 HTTP 请求和响应，缓存机制并支持拦截器。HttpClient 是 Angular 的一部分，所以如果你使用 Angular，HttpClient 就已经存在于你的工程中了。
HttpClient 的使用
前提：假设有一个后台服务，它有一个 GET 方法，它返回 JSON 类型的数据。
第一步，导入 HttpClient 模块。
import { HttpClientModule } from '@angular/common/http';第二步，在 AppModule 中配置 HttpClient 模块。
-- -------------------- ---- -------
-----------
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -第三步，实现一个服务来处理请求。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
-------------
------ ----- ----------- -
------------------- ----- ----------- - -
--------- -
------ ---------------------------
-
-getData 方法向后台发送一个 GET 请求，它请求的地址是 '/api/data' ，并返回一个 RxJS 可观察对象。RxJS 是 Angular 中用来处理异步数据流的框架。
第四步，订阅可观察对象并处理响应。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- -------- ---- -------
-----
--
--
------ ----- ------------ -
----- ------
------------------- ------------ ------------ --
---------- -
----------------------------------------- -- -
--------- - -----
---
-
-这里，我们在 AppComponent 中订阅了可观察对象，并在响应到达时更新了列表。
HttpClient 格式
HttpClient 提供了一系列的方法来处理不同的 HTTP 请求方法。这些方法分别是：
- delete
- get
- head
- jsonp
- options
- patch
- post
- put
这些方法的参数都相同，都是一个字符串类型的 url ，和一个可选的 options 对象。options 对象包含一些方法特有的参数。这个对象中的常见属性有：
- headers：请求头的配置。
- observe：指定响应类型的观察者类型。
- params：请求参数。
- reportProgress：是否报告上传或下载的进度。
- responseType：响应的类型。
- withCredentials：是否跨域请求。
HttpClient 的错误处理
当请求出错时，HttpClient 会返回一个错误信息的可观察对象。如果你希望应用程序可以处理错误，你应该订阅错误信息。你可以使用 catchError 操作符来处理这些错误。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---------- - ---- -----------------
------------
--------- -----------
--------- -
---- -------------------- ---------------- ------------ --------
--- -------------
--- ----------- ---- -- -------- ---- -------
-----
--
--
------ ----- ------------ -
------------- -------
----- ------
------------------- ------------ ------------ --
---------- -
--------------------------------
------------------ -- -
----------------- - ------------
------ ---
--
---------------- -- -
--------- - -----
---
-
-在这个例子中，我们利用了 catchError 操作符来处理错误。当 handleError 被执行时，我们简单地将 errorMessage 赋值为一个适当的错误消息，并将 data 赋值为空数组。
HttpClient 的拦截器
在我们的应用程序中，我们可能需要在所有 HTTP 请求之前执行某些操作，例如添加身份验证信息。这正是 HTTP 拦截器的用武之地。
为了添加一个拦截器，我们首先需要定义一个拦截器类。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
----- --------- - ----------------
----- ------- - -----------
-------- -------------------------------- ----------
---
------ ---------------------
-
-在这个例子中，我们定义了一个 AuthInterceptor。它实现了 HttpInterceptor 接口，接口要求我们实现一个拦截方法 intercept 。intercept 方法首先检查是否有一个有效的身份验证令牌，如果有则将其添加到请求的 headers 中，同时克隆该请求。最后，返回处理函数的下一个函数的 handle 方法所返回的 observable。
这个 AuthInterceptor 类仅仅是一个简单的例子，你可以根据你的需要来添加更多的拦截器。
为了让 HttpClient 在每个请求中加入我们的拦截器，我们必须在 AppModule 中的 HttpClient 模块引入时添加拦截器类。
-- -------------------- ---- -------
------ - ----------------- ----------------- - ---- -----------------------
------ - --------------- - ---- ---------------------
-----------
-------- -
--------------
----------------
--
---------- -
- -------- ------------------ --------- ---------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- - -在这个例子中，我们添加了一个 HTTP_INTERCEPTORS 依赖注入提供程序，并通过它来添加 AuthInterceptor 来指定我们要添加的拦截器类。multi 属性是必需的，因为我们可能有多个拦截器。
HttpClient 的缓存机制
HttpClient支持缓存响应数据，以便下一次调用该请求时，可以在不重新执行整个请求的情况下返回该响应。这可以提高应用程序的响应速度。
为了实现缓存，我们需要导入 HttpClient 的 HttpCacheService。
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------------
------ - ----------------- - ---- -----------------------
------ - ------------------ - ---- ------------------------
-----------
-------- -
--------------
----------------
--
---------- -
-----------------
- -------- ------------------ --------- ------------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- - -然后我们需要实现一个 CachingInterceptor 类。
-- -------------------- ---- -------
------ - ---------- ------------ ---------------- ----------- - ---- -----------------------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - --- - ---- -----------------
------ - ---------------- - ---- -----------------------
-------------
------ ----- ------------------ ---------- --------------- -
------------------- ------------- ----------------- --
-------------- ----------------- ----- ------------- -------------------------- -
-- ---------------------------
-- ----------- --- ------ -
------ -----------------
-
-- -----------------
----- -------------- - ---------------------------
-- ---------------- -
------ ------------------------------
-
-- -------------
------ ----------------
------
--------- -- -
-- ------ ---------- ------------- -
-------------------------- -------
-
--
--
-
-CachingInterceptor 来管理我们的缓存。 在拦截器的构造函数中，我们注入了一个名为 HttpCacheService 的服务。 对于单个请求，它首先检查缓存是否包含请求的响应数据。如果缓存了该响应，则它会立即返回缓存的响应。否则，它会将请求传递给处理程序，等待网络响应，并缓存响应以供以后使用。
总结
HttpClient 是 Angular 中用来处理和后台交互的库。 它支持 JSON 数据，处理 HTTP 请求和响应，并支持拦截器。除此之外，HttpClient还支持缓存机制、异常处理等。通过学习这些内容，我们可以掌握如何顺畅地将Angular应用程序与服务器集成起来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a6241aadd4f0e0ffed2afd