rxjs创建异步数据的Observable

Posted 2020-11-27 芙蓉0504

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\');

输出结果都是：

 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\')
    )

输出结果：

 

 

 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;

执行结果：

 

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

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

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