关于getUsers Observable随时间返回多个值的原理请求解惑

首先先把你的代码修正语法问题后整理如下（原代码里const getUsers直接写在constructor内不符合语法规范）：

class Users {
  constructor(private http: HTTPClient) {
    this.fetchUsers();
  }

  fetchUsers() {
    const userObservable = this.http.get('url').map(res => res);
    userObservable.subscribe(res => console.log('Response : ' + res));
  }
}

先澄清：默认HTTP请求的Observable只发射一次值 #

首先要明确：你代码里http.get()返回的Observable，默认只会发射一次值——当HTTP请求成功拿到响应时，它会把响应数据推送给订阅者，随后就结束数据流（不会再推送后续值）。但Observable本身的设计是支持异步多值推送的，HTTP场景只是其中一种单值特例，下面拆解核心原理：

Observable的核心工作逻辑 #

Observable可以看作一个异步数据流的生产者，核心运行机制是：

• 只有当订阅者调用.subscribe()时，Observable才会启动内部的执行逻辑（这类Observable叫「冷Observable」，HTTP请求的Observable就属于冷Observable）
• 它可以在任意时间点，通过next()方法向订阅者推送数据——这个推送动作可以做一次，也可以做多次
• 当没有更多数据要推送时，会调用complete()结束数据流；如果执行出错，则调用error()推送错误信息

如何让Observable随时间返回多个值？ #

如果想让类似fetchUsers里的Observable实现“随时间返回多个值”，常见的实现方式有这些：

• 定时重复发起HTTP请求：用interval()操作符每隔一段时间触发一次请求，这样Observable就会周期性推送新的响应值

  // 每隔5秒发起一次请求，持续返回新的响应
  const repeatedUserObservable = interval(5000).pipe(
    switchMap(() => this.http.get('url'))
  );
  repeatedUserObservable.subscribe(res => console.log('新响应: ', res));
  

• 绑定持续事件流：比如监听WebSocket连接、前端DOM事件（输入框输入、页面滚动等），这类Observable会随着事件触发不断推送新值
• 手动创建多值Observable：用Observable.create()、interval()、from()等操作符创建可发射多个值的数据流

  // 每隔1秒发射一个数字，共发射5次后结束
  const numberObservable = interval(1000).pipe(take(5));
  numberObservable.subscribe(num => console.log('当前数字: ', num));
  

回到你的代码 #

你代码里的map(res => res)只是原样返回响应数据，不会改变Observable的发射次数。如果需要它随时间返回多个值，就需要用上述方式改造，把单次HTTP请求转为重复请求，或者绑定到持续的事件源上。

内容的提问来源于stack exchange，提问作者JayaKrishna