在 Angular 6 中使用 rxjs 可观察对象的目的是啥？与 async/await 相比，rxjs 的优势是啥？ [复制]

Posted 2023-02-22

【中文标题】在 Angular 6 中使用 rxjs 可观察对象的目的是啥？与 async/await 相比，rxjs 的优势是啥？ [复制]

【英文标题】：What is a purpose of using rxjs observables in angular 6? And what are the advantages of rxjs over async/await? [duplicate]在 Angular 6 中使用 rxjs 可观察对象的目的是什么？与 async/await 相比，rxjs 的优势是什么？ [复制]

【发布时间】：2019-02-20 09:47:23

【问题描述】：

我目前正在开发一个使用 Angular 6 作为其前端框架的 Web 应用程序。我还将使用一些 api 端点从服务器获取数据。在这里我被卡住了，根据角度文档，它建议使用 rxjs，但我在使用 rxjs 运算符时有点困惑。

【问题讨论】：

HttpClient 可以做的不仅仅是发出一个简单的请求，还可以流式传输进度事件等。这些是使用 Promise 无法完成的事情。同样，promise 不能被取消，但 observables 可以，允许你取消请求。如果您愿意这样做并且不想进入反应式编程，您仍然可以将 observable 转换为 Promise 并使用 async / await。

【参考方案1】：

如果只考虑对 API 的 http 调用，RxJS 与 Promises 相比带来的优势可能并不多。 retry 操作符使发生错误时重试变得更容易，也许使用 switchMap 管理竞争条件更容易，但总体上没有那么多。

原因是 http 调用是“一次性”的事情。您触发 1 个呼叫，而该 1 个呼叫仅返回 1 个结果或错误。就像 Promese 是“一次性”的东西一样。

RxJS 真正闪耀的地方是当您必须处理随着时间的推移可能有超过 1 个发射的事件流时。 Cloud 和 DOM 是此类流源的两个示例。在这些情况下，您可以看到 RxJS 是如何发挥 Promises 的作用的。

这里有几个例子：

A video from Angular University about Type ahead implemented using Observables

An article on the same topic

How to animate objects with RxJS

【参考方案2】：

如果我们在 http 调用完成之前取消订阅，则 Observable 为 cancelable - http 调用将被中止。

Observable 具有更好的可组合性，例如：默认情况下 Promise 有 1 个扁平化策略：promise1.then(()=>promise2)，RxJs 有很多：

switchMap,mergeMap,concatMap,exhaustMap,

Observable 更具表现力，就像 Lodash 用于异步操作（有很多有用的 运营商）