Rxjs入门2-RxJs诞生、Observable[简介、创建、订阅]、调试工具、Observable[执行、清理]、Observer、Subscription[取消多个订阅]

最新推荐文章于 2024-08-23 08:36:56 发布

_尊哥

最新推荐文章于 2024-08-23 08:36:56 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript 文章标签： rxjs

本文链接：https://blog.csdn.net/cuishizun/article/details/80364142

版权

本文介绍了RxJS的起源，重点讲解了Observable的概念、创建、订阅及调试工具。通过示例展示了如何创建和订阅Observable，以及如何利用Subscription进行执行管理和取消订阅。此外，还探讨了Observer在处理数据流中的作用。

摘要由CSDN通过智能技术生成

10、RxJs的诞生

Rx最近在各个领域都非常火. 其实Rx是微软在好多年前针对C#写的一个开源类库，
但好多年都不温不火，一直到Netflix针对Java平台做出了RxJava版本后才在开源社区热度飞速蹿升。当然Rx还在其他语言有所实现，如RxAndroid、RxSwift、RxNet等。
官网给出了以下几种用来解决异步事件管理的基本概念：
这里写图片描述
是不是很懵懂？没关系，下面咱们具体介绍一下。

11、Observable(可观察对象)简介

咱们知道数组即元素集合，比如说 [1, 2, 3, 4, 5]。你能够马上拿到所有的元素，并且可以对它们做一些诸如 map 和 filter 这样的操作。这使得你可以将元素集合用你想要的方式转换。现在假定数组里的每个元素伴随时间流动出现，也就是说，你不是马上拿到所有的元素，而是一次拿到一个。你可能在第一秒拿到第一个元素，第三秒拿到下一个，诸如此类。就像图中展现的这样：
这里写图片描述
这就被称为数据流，或者是事件序列，或者更加贴切地说，一个 observable。
一个 observable 就是一个伴随着时间流动的数据集合。
就像对数组做的那些操作一样，你可以对这些数据进行map、filter 或者做些其他的操作，来创建和组合新的 observable。

12、Observable的创建

const aboutAnything = 42;
// 从 just about anything（单个数据）创建。
// observable 发送这个数据，然后完成。
const meaningOfLife$ = Rx.Observable.just(aboutAnything);

// 从一个数组或一个可迭代对象创建。
// observable 发送数组中的每个元素，然后完成。
const myNumber$ = Rx.Observable.from([1, 2, 3, 4, 5]);

// 从一个 promise 创建。
// observable 发送最终的结果，然后完成（或者抛出错误）。
const myData$ = 
Rx.Observable.fromPromise(fetch('http://example.com/users'));

// 从一个事件创建。
// observable 连续地发送事件监听器上的事件。
const mouseMove$ = Rx.Observable
  .fromEvent(document.documentElement, 'mousemove’);

//直接创建，它每隔一秒会向观察者发送字符串 'hi'
var observable = Rx.Observable.create(function subscribe(observer) { 
       var id = setInterval(() => { 
             observer.next('hi’) 
       }, 1000); 
});
//还可以使用其他所谓的创建操作符, 像 of、from、interval、等等

注意：变量后的美元符($)只是一个约定，用于表明这个变量是 o