30 天精通 RxJS (06) - 代码升级V6

06篇主要讲的是 creation operator。

原文参考链接 https://www.jianshu.com/p/4ef56f1f5b0f

• of 操作符

import React, { useState, useEffect } from 'react';
import { of } from 'rxjs';

function App() {
  useEffect(() => {
    console.log('rx.js');
    of('Jerry','Anna').subscribe(v=>console.log(v));
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

export default App;

• from 操作符

function App() {
  useEffect(() => {
    console.log('rx.js');
    from(['Jerry','Anna','test']).subscribe(v=>console.log(v));
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

from和of的区别有点类似于call和apply的区别

from接收字符串作为参数

function App() {
  useEffect(() => {
    console.log('rx.js');
    from('Jerry').subscribe(v=>console.log(v));
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

from接收Promise作为参数

function App() {
  useEffect(() => {
    console.log('rx.js');
    from(new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('hello, RxJS');
      }, 1000);
    })).subscribe(v => console.log(v));
  }, [])

RxJS 当前的版本是6.5.3。fromPromise操作符没有在RxJS官网找到，应该已经被移除。

• fromEvent 操作符

function App() {
  useEffect(() => {
    console.log('rx.js');
    fromEvent(document.body,'click')
    .subscribe(v => console.log(v));
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

chrome控制台输出结果为

image.png

• fromEventPattern 操作符

传入注册监听及移除监听两种方法的定义

import React, { useState, useEffect } from 'react';
import { fromEventPattern } from 'rxjs';

class Producer {
  constructor() {
    this.listeners = [];
  }
  addListener(listener) {
    if (typeof listener === 'function') {
      this.listeners.push(listener)
    } else {
      throw new Error('listener 必须是 function')
    }
  }
  removeListener(listener) {
    this.listeners.splice(this.listeners.indexOf(listener), 1)
  }
  notify(message) {
    this.listeners.forEach(listener => {
      listener(message);
    })
  }
}

function App() {
  useEffect(() => {
    console.log('rx.js');
    const egghead = new Producer();
    fromEventPattern(
      (handler) => egghead.addListener(handler),
      (handler) => egghead.removeListener(handler)
    ).subscribe(v => console.log(v));
    egghead.notify('Hello! Can you hear me?');
  }, [])

  return (
    <div className="App">
      <h1>Rx.Js</h1>
    </div>
  );
}

export default App;

• Empty 操作符

//直接输出complete
useEffect(() => {
    console.log('rx.js');
    empty().subscribe(v => console.log(v), e => console.log(e), () => console.log('complete'));
  }, [])

• Never 操作符

useEffect(() => {
    console.log('rx.js');
    never().subscribe(v => console.log(v), e => console.log(e), () => console.log('complete'));
  }, [])

• throwError 操作符

原文叫throw操作符，目前已经改为throwError操作符

useEffect(() => {
    console.log('rx.js');
    throwError('error了').subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
  }, [])

• Interval 操作符

只有一个参数，表示间隔

useEffect(() => {
    console.log('rx.js');
    interval(1000).subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
  }, [])

• timer 操作符

两个参数，第一个为第一次的等待毫秒，第二个参数为后面的间隔

  //第一个1会等1秒发出，后面每隔2秒发出一个递增的值
  //如果只传一个参数，只会发出一次 1 ，然后就complete了
useEffect(() => {
    console.log('rx.js');
    timer(1000,2000).subscribe(v => console.log(v), e => console.error(e), () => console.log('complete'));
  }, [])

取消订阅

useEffect(() => {
    console.log('rx.js');
    const subscription = interval(1000).subscribe(v => console.log(v,typeof v), e => console.error(e), () => console.log('complete'));
    setTimeout(()=>{
      subscription.unsubscribe();
    },7000);
  }, [])

---

下面是个自己写的小demo，检测10秒钟没有鼠标点击，重定向到其他页面

useEffect(() => {
    console.log('rx.js');
    interval(1000).pipe(takeUntil(fromEvent(document.body, 'click')), repeat())
      .subscribe(v => v === 10 && window.location.href='http://***', e => console.error(e), () => { console.log('complete') });
  }, [])