欢迎光临
我们一直在努力

RxJS的学习之路三(创建一个Observable)

Observer和Observable是什么

在RxJS中Observable是可以被订阅(subscribe)的一个流对象,而observer是订阅Observable的物件,理解这两者的区别和联系是很重要的。

用RxJS官网上给的一个例子来说明

var Obsec = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});
observable.subscribe(
  value => console.log(value),
  err => {},
  () => console.log('this is the end')
);
复制代码

如上所示,用create的方式(创建Observable的一种方式)创建了一个Observable,这个Observable由observer(观察者)的方法组成的流的顺序步奏,从而构建了一个完成的Observable观察者对象。

观察者(observer)的方法有:

  • observer.next(value): 类似于promise的then,表示接下来的传入或操作;
  • observer.complete(): 表示观察者对象的流结束,complete()触发后,next将不再起作用;
  • observer.error(): 当报错是执行,并结束流;

以上三个方法放在流对象后面的subscribe函数中可以简写

ob.subscribe({
    next: d => console.log(d),
    error: err => console.error(err),
    complete: () => console.log('end of the stream')
})
复制代码

通常subscribe对象中仅传入一个函数的时候视为next函数执行。

如何创建一个Observable

RxJS有很多的创建Observable的方法,基于这些方法,RxJS做到了万物皆可流式操作。

最基础的创建方式creat

和之前的例子一样,create方法的创建和promise有点相似,next()函数中可以传入任何东西,包括另外一个observable对象。

var observable = observable
	.create(function(observer) {
		observer.next('lina'); 
		observer.next('pom');
		observer.next('luna');
	})
复制代码

订阅这个observable它会依次送出‘lina’,‘pom’,‘luna’,另外值得注意的一点是,这样的创建是同步执行的,这样就达到了rxjs可以同时处理同步和非同步行为的特性。

of

在实际项目中,我们往往可以直接引入操作符,就不用observable.的麻烦操作了

import { of } from 'rxjs';

of('lina', 'pom', 'luna').subscribe(res => console.log(res))
// lina
// pom
// luna
复制代码

of是一种创建observable的简便方法

from

from是将数组转化为observable的方法

import { from } from 'rxjs';

const arr = ['lina', 'pom', 'luna'];
from(arr).subscribe(res => console.log(res));
// lina
// pom
// luna
复制代码

fromEvent

fromEvent可以将时间监听转化为流

import { from } from 'rxjs';

let eventListener = fromEvent(document.body, 'click');
eventListener.subscribe(() => console('click'))
复制代码

在点击页面后会打印出‘click’。

interval, timer

interval创建一个每间隔指定时间发出一次事件的observable

import { interval } from 'rxjs';

interval(1000).subscribe(res => console.log(res))
    // 0
    // 1
    // 2
    // ...
复制代码

timer和interval相似,有两个参数,第一个代表首个元素发出的时间,第二个参数代表后面元素发出的间隔时间。

 timer(1000, 5000).subscribe(res => console.log(res))
    //间隔一秒
    // 0
    //间隔5s
    // 1
    //间隔5s
    // 2
    // ...
复制代码

第一个参数还可以设置为Date,表示在指定的日期时间开始

empty,never, throw

来说几个比较特殊的操作符.

  • empty创建一个空的observable,监听即完成。

  • never创建一个永不结束的observable,永远不会完成。

  • throw创建一个立即抛出错误的observable,创建即报错。

不过这些都没有用到过。。。

退订

想要让observable对象中指,除了用以后会介绍到的操作符之外,还有一种办法。

订阅的subscribe()是一个Subscription对象,该对象有一个unsubscribe方法可以满足退订的要求。

import { interval } from 'rxjs';

let subp = interval(1000).subscribe(res => console.log(res))
setTimeout(() => {
    subp.unsubscribe() // 停止订阅
}, 4000);
    // 0
    // 1
    // 2
    // 3
复制代码

本文来源于互联网:RxJS的学习之路三(创建一个Observable)

赞(0)
未经允许不得转载:流量话费活动资讯发布 薅羊毛线报平台-云上的日子 » RxJS的学习之路三(创建一个Observable)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

活动线报-流量话费-编程技巧

联系我们联系我们