RxJS中new Observable与of/from创建Observable的核心区别

首先要明确：不管是用of/from这类内置操作符创建的流，还是通过new Observable()实例化出来的流，最终产出的都是完全相同的Observable类型对象，不存在类型上的本质区别，所有差异都来自创建阶段的封装逻辑、内置兜底能力、适用场景的不同：

1. 逻辑封装与内置兜底能力的差异 #

• 借助of/from等官方操作符创建的Observable，是框架提前封装好的标准化实现，所有边界行为都做了兜底处理：
  • 推送完全部值后会自动触发complete结束通知，不需要手动补写结束逻辑
  • 自动识别输入源的类型做适配：比如传入数组会按顺序遍历推送值，传入Promise会自动处理成功/失败状态，把失败原因转成标准的error通知推送给订阅者，不会让异常变成全局未捕获报错
  • 内置完整的资源清理逻辑：比如用from包裹fetch请求创建的流，会在用户退订时自动触发请求中断，不需要手动写AbortController的关联逻辑
  • 代码量极少，不需要额外的边界判断
• 直接通过new Observable(subscriberFn)创建的Observable，是完全开放的裸实现，所有行为都需要开发者手动补全：
  • 忘了调用subscriber.complete()的话，流会永远保持活跃状态，不会自动结束
  • 异步逻辑抛出的异常如果没有手动捕获、转成subscriber.error()推送，会直接变成全局未捕获错误，绕过RxJS的错误处理机制
  • 退订时的资源清理（清定时器、解绑事件、取消请求）全靠自己写，漏写就会出现内存泄漏

举个可直接对比的等价实现：

// 用of创建：自动按顺序推值，推完自动结束
of(1, 2, 3).subscribe({
  next: val => console.log(val),
  complete: () => console.log('流自动结束')
})

// 手动new Observable实现同样效果：必须手动把所有逻辑写全
new Observable((subscriber) => {
  subscriber.next(1)
  subscriber.next(2)
  subscriber.next(3)
  subscriber.complete() // 缺了这行就不会触发结束通知
})

2. 开发效率与灵活度的取舍 #

• 用内置操作符创建的场景，核心是复用经过海量生产场景验证的通用逻辑：写代码快、不容易犯低级疏漏，覆盖了90%以上的常规业务流创建需求，是日常开发的首选方式
• 直接实例化创建的场景，是为了实现内置操作符覆盖不到的自定义逻辑：比如对接特殊的第三方SDK回调、自定义硬件事件源这类没有现成操作符可以适配的场景，灵活度最高，但对开发者对RxJS核心机制的理解要求也最高，很容易写出有隐患的流

3. 容易被忽略的细节差异 #

• 多数内置操作符创建的流，已经做了多订阅的兼容处理：比如from(Promise)创建的流，第一次订阅时就会触发Promise执行，后续所有订阅拿到的都是同一次执行的结果，不会重复发起请求；而手动写new Observable默认是纯冷流，每一次订阅都会重新执行一遍传入的回调逻辑，如果要实现类似的共享效果，需要手动加额外的共享逻辑，很容易出现重复请求的bug
• 内置操作符的实现逻辑会随着RxJS版本迭代同步优化：后续版本更新的性能改进、特殊场景兼容，只要升级框架版本就能自动受益，不需要改动业务代码；而手写的自定义流，所有兼容性、性能优化都需要开发者自己跟进维护

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