在前端开发中，我们经常需要从后端取得数据或者与后端进行双向通信。这时，我们通常会使用 HTTP 或者 WebSockets 技术。而 RxJS 和 Angular 2 为我们提供了可观察的 HTTP 和 WebSockets 请求的功能，极大地方便了我们的开发工作。本文将对这方面的内容进行详细介绍，并提供示例代码及解析。
RxJS
在介绍如何使用 RxJS 进行 HTTP 和 WebSockets 请求之前，我们先来了解一下 RxJS 是什么。RxJS 是一个基于事件流和数据流的响应式编程库，它使得异步编程变得更加简单和可读。
在 RxJS 中，我们定义的是数据流，这个数据流中的每一个元素都可以被称为事件。而数据流与事件的关系就是这个数据流中的事件按照发生的顺序来组成的序列。因此我们很自然地就可以用操作符来对这个序列进行处理。
HTTP 请求
我们使用 HttpClient 进行 HTTP 请求。HttpClient 是 Angular 中新增的异步请求处理 API，而且其设计与 RxJS 结合得非常好。下面是一个使用 HttpClient 进行 get 请求的示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- ------------------
-------------
------ ----- ----------- -
------------------- ----- ----------- --
------------ -------- --------------- -
------ -------------------
-
-在这个代码中，我们通过 HttpClient.get 方法来请求数据，返回值是一个 Observable 对象。该对象提供了 subscribe、map、filter 等 RxJS 操作符，可以方便的处理和解析请求结果。我们可以在后面进行链式操作：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
----
--- ----------- ---- -- --------- ---- -------
-----
-
--
------ ----- ------------ ---------- ------ -
------ --------------
------------------- ------------ ------------ --
---------- -
----------------
-
---------- -
----------------
-----------------
---------- -- -----------
----------------- -- -
---------- - -----
---
-
-在这个代码中，我们在模板中使用 *ngFor 对 dataSource 进行解析。另外，在调用 getData 方法后，我们使用了 RxJS 中的 map 操作符来转换 JSON 数据。而在 subscribe 方法中，我们则将转换后的数据结果进行渲染。因此，我们可以很简单地实现 HTTP 请求。
WebSocket 请求
WebSockets 是一种全双工通信协议，与 HTTP 不同之处在于，它是一种更接近 TCP 的协议，而且在数据传输的过程中，可以在客户端和服务器端之间进行实时通信。在 Angular 中，我们可以使用 WebSocketSubject 来实现可观察的 WebSockets。下面是一个基于 WebSocketSubject 的示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ---------------- - ---- ---------------------------------------
-------------
------ ----- ---------------- -
------- -------- ----------------------
------------- -
------------ - --- ----------------------------------------------
-
---------------- ------- -
-----------------------
-
-------------- ------------------ -
------ ----------------------------
-
------- -
------------------------
-
-在这个代码中，我们创建了一个 WebSocketSubject 对象，将其与一个 WebSocket URL 进行了关联，在 getMessages 方法中，我们将其转换成 RxJS 能够处理的 Observable 对象。在 sendMessage 方法中，我们向服务器端发送一个文本消息。而在 close 方法中，我们则关闭了 WebSocketSubject 对象。通过这些方法，我们就可以非常方便的进行 WebSockets 请求了。
最后附上这个示例的对应组件的代码：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
-----
------ ------ ----------- ----------------- ---------
------- ------------------------------------------------
------
----
--- ----------- ------- -- ------------ ------- -------
-----
-
--
------ ----- ------------ -
--------- ------------- - ---
------------------- ----------------- ----------------- --
---------- -
------------------------------------------------------- ------- -- -
----------------------------
---
-
-------------------- ------- -
-------------------------------------------
-
-在这个代码中，我们通过 webSocketService.getMessages 方法获取 Observable 对象，并在 subscribe 方法中用于将消息进行渲染。而 sendMessage 方法则调用 WebSocketService 中的 sendMessage 方法来发送消息到服务器端。这样，我们就可以实现一个可实时通信的示例。
总结
本文中，我们介绍了如何使用 RxJS 和 Angular 2 进行可观察的 HTTP 和 WebSockets 请求，并给出了详细的示例代码及解析。通过这些示例，也许我们可以更好地理解 RxJS 和 Angular 2 的使用，同时也能够对前端开发中的异步编程以及实时通信提供一些启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c4f5f968c7c53b0767557
