在前端开发中，异步编程是非常常见的需求。在 Angular2 中，使用 ES7 的 Async/Await 配合 RxJS，可以非常方便地处理异步任务，实现最佳实践。
什么是 Async/Await
Async/Await 是 ES7 中的新特性，它可以让异步代码看起来像同步代码，简化代码的复杂性。使用 Async 定义一个异步函数，这个函数返回一个 Promise 对象。在异步操作完成后，可以使用 Await 关键字获取异步操作的结果。如果异步操作成功，Await 返回解决（resolved）状态的 Promise 对象，否则 Await 抛出 Reject 状态的 Promise 对象。
----- -------- ----------- - ----- ------ - ----- -------------------------------------- -------------------- -
上面的代码中，使用 Async 定义一个异步函数 asyncFunc，它将异步获取 http://example.com/data.json 的结果赋值给 result 变量。在使用 Await 获取异步操作结果后，打印结果。这里使用了 fetch 函数获取数据，它返回一个 Promise 对象。
什么是 RxJS
RxJS 是一个基于 Observable 的响应式编程库。Observable 可以通过订阅者模式监听事件，通知观察者事件的发生。在 Angular2 中，RxJS 是非常重要的库，在表单处理、HTTP 请求、事件绑定、动画等方面都有着广泛的应用。
----- ------- - --- ---------------------- -- - ----------------- ----------------- ----------------- -------------------- --- ----- ------------ - ------------------ ----- -- ------------------- --- -- ----------------- -- -- ----------------------- --
上面的代码中，使用 Rx.Observable 创建一个 Observable 对象 source$，它在订阅后会发射 1、2、3 这三个值，然后完成。使用 Observable.subscribe() 订阅这个 Observable 对象，打印其发射的值。
Async/Await 和 RxJS 结合使用
使用 Async/Await 和 RxJS 结合使用，可以让异步操作变得更加简单。例如，我们可以使用 Async/Await 和 RxJS 结合，获取一个 HTTP 请求的结果：
----- -------- --------------- - ----- -------- - ----- ------------------------------------- ----- -------- - ----- ---------------- ------ --------- - ----- --------- - ------------------------------------------- -------------------- -------- -- ---------------------- --- -- ---------------- --
上面的代码中，使用 Async/Await 获取 HTTP 请求的结果，并使用 Rx.Observable.fromPromise 将 Promise 对象转换成 Observable 对象。使用 subscribe 订阅 Observable 对象，打印其发射的值。
Async/Await 和 RxJS 实现异步任务
使用 Async/Await 和 RxJS 实现异步任务，可以极大地简化异步代码的复杂性。下面是一个例子，它实现了一个从服务器获取数据，并且实时更新的功能：
----- -------- ------------ -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
-
----- -------- ------------- --------- -
----- ------ -
----- ---- - ----- -------------
------------------------
----- ----------------------------
-
-
----- --- - --------------------------
----- -------- - -----
------------ - --- -------------
---------------------- --
------------- ---------
-
-----------
---- -- ------------------
--- -- ----------------
--上面的代码中，定义了异步函数 getData 和 pollData，分别用于获取数据和轮询数据。使用 Rx.Observable.defer 创建一个 Observable 对象，通过订阅者函数实现轮询数据的功能。使用 subscribe 订阅这个 Observable 对象，观察数据的变化。
结论
使用 Async/Await 和 RxJS 结合使用，可以非常方便地实现异步任务的最佳实践。在 Angular2 中，这种方式非常常见，我们应该熟练掌握它的使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672c774bddd3a70eb6d845e0