rxjs创建异步数据的Observable

chimywang 2020-03-03

interval和timer:定时产生数据

interval的参数是1000,在1秒的时刻吐出0,2s吐出1,3s吐出2,........

这个数据流不会完结,因为interval不会主动调用下游的complete,要想停止这个数据的序列,必须要做退订的动作。

import { Observable } from ‘rxjs‘;
import ‘rxjs/add/observable/interval‘....
  let source$ = Observable.interval(1000);

  source$.subscribe(
    console.log,
    null,
    ()=>console.log(‘complete‘)
  )
  ....
import { interval } from ‘rxjs‘;
let source$ = interval(2000);

timer第一个参数可以是一个数值,代表毫秒数,在指定毫秒数之后吐出一个数据0.

import { timer } from ‘rxjs‘;
let source$ = timer(1000);

timer第一个参数也可以是一个Date类型的对象

const later = new Date (Date.now() + 1000)
  let source$ = timer(later);

timer支持第二参数,表示时间间隔。相当于interval的数据流,从0开始,每次1s递增1。

let source$ = timer(2000,1000);

from:可把一切转化为Observable

参数可以是数组

import { from } from ‘rxjs‘;

let source$ = from([1,2,3]);

参数可以是arguments,长得像数组的,也可以被from处理

function toObservable(){
  return from(arguments)
}
let source$ = toObservable(1,2,3);

参数可以是字符串。

let source$ = from(‘123‘);

输出结果都是:

rxjs创建异步数据的Observable

 fromPromise:异步处理的交接

当promise成功完成的时候,from也知道不会再有新的数据了,所以立刻结束。

const promise = Promise.resolve(‘good‘)
let source$ = from(promise);

  source$.subscribe(
    console.log,
    null,
    ()=>console.log(‘complete‘)
  )


输出结果:

 
如果promise对象失败,from产生的对象也会立刻产生失败事件

const promise = Promise.reject(‘oops‘)
  let source$ = from(promise);

    source$.subscribe(
      console.log,
      error => console.log(‘catch ‘+error),
      ()=>console.log(‘complete‘)
    )

输出结果:

rxjs创建异步数据的Observable

 fromEvent

fromEvent的第一个参数是一个事件源,在浏览器中,最常见的事件源就是特定的DOM元素。

第二个参数是事件名称。对应的事件:click,mousemove等这样的字符串。

实例一:点击按钮,div中的数字会增加1

import React from ‘react‘;
import { fromEvent } from ‘rxjs‘;

class FlowPage extends React.PureComponent {
  componentDidMount(){
    let ClickCount = 0;  
    const event$ = fromEvent(document.getElementById(‘clickMe‘),‘click‘);
    event$.subscribe(
      () => {
        document.querySelector(‘#text‘).innerHTML = ++ClickCount;
      }
    )
  }
  render(){
    return ( <div>
        <h1>rxjs学习</h1>
        <button id="clickMe">Click me</button>
        <div id="text">0</div>
    </div> ) ;
  }
  
};

export default FlowPage;

fromEvent还可以从Node.js的events中获得数据。

import React from ‘react‘;
import { fromEvent } from ‘rxjs‘;
import { EventEmitter } from ‘events‘;

const FlowPage = () => {  // nodeJS自带的事件发射器,构造出事件发射器实例emitter
  const emitter = new EventEmitter();
  const source$ = fromEvent(emitter,‘msg‘)

  source$.subscribe(
    console.log,
    null,
    ()=>console.log(‘complete‘)
  )
 // emitter的emit函数可以发送任何名称的事件,第一个参数就是事件名称,第二个参数是事件对象。
  emitter.emit(‘msg‘,‘1‘)
  emitter.emit(‘msg‘,‘2‘)
  emitter.emit(‘another msg‘,‘oops‘)
  emitter.emit(‘msg‘,‘3‘)
  return <h1>rxjs学习</h1>;
};

export default FlowPage;

执行结果:

rxjs创建异步数据的Observable

 结论:没有输出事件名为another msg的oops结果。

因为another msg没有计入source$,fromEvent的第二个参数明确指定只接受msg类型的事件。

注意:source$添加了Observer之后再去调用emitter.emit。否则Observer什么都接受不到。

相关推荐