RxJS

什么是Rx

  Rx是Reactive Extentions(响应式拓展)的缩写,可以看出这是一种拓展,下面是官方描述:

An API for asynchrnous programing with observable stream

  翻译:利用observable流来异步编程的API。
  其实Rx就是一种对语言的响应式支持,它有各种语言实现,RxJS是利用JavaSctipt语言实现的对JS的响应式拓展。RxJava是对Java的拓展。

Observable和Observer

  Observable和Observer是RxJs内非常重要的两个概念,尤其是Observable,RxJs内有很多很多的操作符,这些操作符全都是围绕Observable来展开工作的,每一个操作符功能都很简单,但是各种操作符搭配就可以完成非常复杂的需求。

Observable

  Observable可观察对象是一个数据流,承载了很多的数据,这里的数据不仅仅是像1,2,3,"A","B"这种值也包含像JS的DOM事件,promise对象等,Observable这个数据流就有序的发送这些”数据“,如同工厂的”传送带“一样,发送给下一个工作点,这里工作点就对应了操作符,经过操作符产生新的Observable对象(源对象不会改变,这里符合了函数式编程的数据不可变性),经过多个操作符形成最终需要的数据流,通知观察者Observer推送数据或者异常。
  Observable最终的状态只能改变一次,那就是error或者completed,当Observable改变状态时会触发观察者Observer相应的方法。

Observer

  Observer是观察者,是一个对象,格式如下:

{
   next:data=>{},
   error:err=>{},
   complete:()=>{}
}    

next:可以出发多次,由Observable内通过next方法通知。
error:只可以触发一次,由Observable内通过error方法通知。
complete:只可以触发一次,由Observable内通过complete方法通知。
一个简单的示例如下:

const observable = new Observable((observer)=>{
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.next(4);
    observer.next(5);
    observer.complete();
});
const observer = {
    next:data=>{
        console.log(data)
    },
    error:err=>{
        console.log(err)
    },
    complete:()=>{
        console.log("observable is completed!")
    }
};
observable.subscribe(observer);

  需要注意的是,Observable更多的是利用操作符来生成而不是通过new来创建,操作符按照功能划分为以下几类:
1.创建类,用于创建Observable
2.合并类,用于合并多个Observable
3.辅助类,用于各种场景辅助完成某项功能,如max,min,count这种操作符
4.过滤类,用于过滤出需要的数据形成新的Observable
5.转换类,用于将原来Observable的数据进行转换操作
注意!所有的操作符都不会改变原来的Observable,而是生成新的Observable。
各个操作符之间是链式使用,上一个操作符产生的Observable交给下一个操作符进行处理,因此如何熟练的运用操作符是掌握RxJS的重点。

原文地址:https://www.cnblogs.com/hzozj/p/12880578.html