Angular 中的 observable 和 promise 是如何工作的？答案

【问题标题】：How does observable and promise work in Angular?Angular 中的 observable 和 promise 是如何工作的？
【发布时间】：2020-04-19 18:17:34
【问题描述】：

我对 Observable 和 Promise 有点不清楚。我想在下面以显示一段时间内网站的用户注册计数为例简要解释一下。

场景 1 @ 第 1 分钟：HTTP GET 调用 API 并在第一分钟获取所有 50 条记录

场景 2 @ 第 2 分钟：HTTP GET 再次调用 API 并在第二分钟获取所有 100 条记录

Observable 在一段时间内发出多个值

上面这句话是否意味着场景1足以获取所有记录（即100个注册）来计算注册数。一旦我们进行 API 调用，它是否会监听来自后端的持续响应，直到我们取消订阅者的所有订阅？

一段时间是什么意思？

Promise 发出单个值

这是否意味着当我们使用 Promise 时，我们会在特定的调用时间获得所有记录。例如：第 1 分钟有 50 条记录，第 2 分钟有 100 条记录@第二次通话

【问题讨论】：

标签： angular promise rxjs observable

【解决方案1】：

这是一张值一千字的图表：

Single   |  Function | Promise
---------|-----------|----------------
Multiple |  Iterator | Observable
---------|-----------|----------------
         |   Sync    |  Async
         |  (Pull)   |  (Push)

Pull - 消费者决定何时发送来自生产者的数据
推送 - 生产者决定何时将数据发送给消费者

将 Observable 视为时事通讯。订阅简报一次就足够了，只要有新内容可用，您就会继续接收通知 - Observable 在一段时间内发出多个值。

const newsletterProducer = new Subject();
const newsletter$ = newsletterProducer.asObservable();

// It is enough to subscribe only once
newsletter$.subscribe(console.log);

newsletterProducer.next('JS article of the week #1');

// After some time...
timer(1000)
    .subscribe(() => newsletterProducer.next('JS article of the week #2'))

在您的 Angular 应用程序中，消费者可能是您的智能组件。他们将订阅可在数据服务中找到的可观察对象。

另一方面，在处理 promises 时，您必须在每次想要接收内容时明确地请求内容 - Promise 发出单个值 .

const getMovies = genre => new Promise(resolve => setTimeout(resolve, 1000, genre + Math.random()));

const actionMoviesPromise = getMovies('action');

actionMoviesPromise.then(m => console.log('#1 ' + m)); // #1 action0.35095072611888156
actionMoviesPromise.then(m => console.log('#2 ' + m)); // #2 action0.35095072611888156
actionMoviesPromise.then(m => console.log('#3 ' + m)); // #3 action0.35095072611888156


const horrorMoviesPromise = getMovies('horror');

horrorMoviesPromise.then(m => console.log('#1 ' + m)); // #1 horror0.7990946657868658
horrorMoviesPromise.then(m => console.log('#2 ' + m)); // #2 horror0.7990946657868658
horrorMoviesPromise.then(m => console.log('#3 ' + m)); // #3 horror0.7990946657868658

如您所见，如果您想获得另一种类型的电影，您必须为此创建另一个承诺并手动致电then。相反，当使用 Observables 时，consumer 所要做的就是 subscribe 到 producer。然后，每当生产者发出新数据时，消费者都会简单地接收它。

【讨论】：

Observable 在一段时间内发出多个值 - 这对 HTTP 调用也适用吗？例如 - 单次调用 API 调用并继续超时接收数据？
如果您使用的是 Web 套接字，那么在发出请求后保持连接打开的情况下也是如此。另外，请记住，随着时间的推移产生的值可能来自 http 调用、DOM 事件、用户输入等。

【解决方案2】：

在一段时间内意味着使用Observables，您可以轻松控制值的发送。你可以用Observables 做所有Promise 可以做的事情，但它也有一些超能力。

让我们举个例子，试着理解什么是一段时间内：

import { of, interval } from 'rxjs'; 
import { map, take } from 'rxjs/operators';


const source = interval(1000).pipe(
  take(5)
);

source.subscribe(x => console.log(`Value emitted after ${x} seconds`));

以上代码请参考stackblitz console。您可以看到值 0,1,2,3,4 被记录一秒延迟，然后完成。

使用Promises，我们将无法在 5 秒的时间跨度内实现这一目标（发射 0、1、2、3、4）。上面的stackblitz console 也有一个promise 值日志记录。它会发出一个值和完整的数组。

来到你的第二个问题Once we make an API call, will it listens for the continues responses from the back-end until we cancel all the subscriptions from the subscribers? 答案是否。

pagination 的实现可以参考这个link

【讨论】：