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什么都接受不到。

原文地址：https://www.cnblogs.com/hibiscus-ben/p/12400768.html