rxjs6 Creation Operators

原文链接: rxjs6 Creation Operators

上一篇: rxjs

下一篇: rxjs6 Conditional and Boolean Operators & Mathematical and Aggregate Operators

Creation Operators

常用于创建Observable

ajax

有三种形式, 原生, json, 和使用object自定义header

const url = `https://api.github.com/users?per_page=5`
ajax(url).pipe(
  map(userResponse => console.log('users resp: ', userResponse)),
  catchError(error => {
    console.log('error: ', error);
    return of(error);
  })
).subscribe()

ajax.getJSON(url).pipe(
  map(userResponse => console.log('users json: ', userResponse)),
  catchError(error => {
    console.log('error: ', error);
    return of(error);
  })
).subscribe()
ajax({
  url: 'https://httpbin.org/delay/2',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'rxjs-custom-header': 'Rxjs'
  },
  body: {
    rxjs: 'Hello World!'
  }
}).pipe(
  map(response => console.log('response object: ', response)),
  catchError(error => {
    console.log('error: ', error);
    return of(error);
  })
).subscribe()

bindCallback

绑定一个函数, 函数的最后一个参数是一个回调, 通过回调emit一个值

下面代码会在一秒后输出两数之和

const {bindCallback} = require('rxjs')
const someFunction = (a, b, done) => {
  setTimeout(
    () => {
      done(a + b)
    }, 1000
  )
};
const boundSomeFunction = bindCallback(someFunction);
boundSomeFunction(11, 22).subscribe(values => {
  console.log('sum', values)  // sum 33
});

bindNodeCallback

也是绑定一个函数, 不过回调的形式是node形式 callback(error, result)

下面代码也会在一秒后输出两数之和

const {bindNodeCallback} = require('rxjs')
const someFunction = (a, b, done) => {
  setTimeout(
    () => {
      //  callback(error, result)
      done(null, a + b)
    }, 1000
  )
};
const boundSomeFunction = bindNodeCallback(someFunction);
boundSomeFunction(11, 22).subscribe(values => {
  console.log('sum', values)  // sum 33
});

create

传入一个函数, 函数的第一个参数会传递一个observer, 调用其next方法来发送数据, 返回取消订阅的函数

下面代码会每隔2秒输出一个数字, 直达取消订阅

const {Observable } = require('rxjs')
/*
  Increment value every 1s, emit even numbers.
*/
const evenNumbers = Observable.create(function(observer) {
  let value = 0;
  const interval = setInterval(() => {
    if (value % 2 === 0) {
      observer.next(value);
    }
    value++;
  }, 1000);
  return () => clearInterval(interval);
});
//output: 0...2...4...6...8
const subscribe = evenNumbers.subscribe(val => console.log(val));
//unsubscribe after 10 seconds
setTimeout(() => {
  subscribe.unsubscribe();
}, 10000);

defer

用来进行延迟取值

const {defer, of} = require('rxjs')
const s1 = of(new Date()); //will capture current date time
const s2 = defer(() => of(new Date())); //will capture date time at the moment of subscription
let now = new Date()
console.log('now', now)
setTimeout(
  () => {
    let later = new Date()
    console.log('later', later)
    s1.subscribe(v => console.log('s1', v))
    s2.subscribe(v => console.log('s2', v))
  }, 2000
)

empty / EMPTY

创建一个空的 Observable

const {empty} = require('rxjs')
empty().subscribe(
  v => console.log('val', v),
  err => console.log('err', err),
  complete => console.log('complete', complete)
)

from

You can provide an Observable, Promise, Array, or Iterable

promise作为单个参数传入时会在resolve时发送值, 在数组中会直接发送, 可以传入迭代对象例如map和set

const {from} = require('rxjs')

function getPromise(val) {
  return new Promise(resolve => {
    setTimeout(
      () => {
        resolve(val)
      }, 1000
    )
  })
}

// 数组的话会输出promise, 而不会等到resolve
from([1, 'a', [23], getPromise(123)]).subscribe(v => console.log('v1 ', v))

// 一秒后输出 456
from(getPromise(456)).subscribe(v => console.log('v2', v))
// You can provide an Observable, Promise, Array, or Iterable
from('abc').subscribe(v => console.log('v3', v))

let m = new Map()
m.set('a', 'aa')
m.set('b', 'bb')
from(m).subscribe(v => console.log('v4', v))

fromEvent

将dom事件作为流, 每次触发事件时产生值

<button id="button">click</button>
<script>
  const {fromEvent} = rxjs;
  let button = document.getElementById('button')
  fromEvent(button, 'click').subscribe(
    e => console.log('click', e.target)
  )
</script>

fromEventPattern

可创建任意api的Observable

<button id="button">click</button>
<script>
  const {fromEventPattern } = rxjs;
  function addClickHandler(handler) {
    document.addEventListener('click', handler);
  }

  function removeClickHandler(handler) {
    document.removeEventListener('click', handler);
  }

  const clicks = fromEventPattern(
    addClickHandler,
    removeClickHandler
  );
  clicks.subscribe(x => console.log(x));
</script>

generate

生成器, 用于按照一定的规则生成一组数据, 参数分别为: 初始值, 条件, 产生式,  映射函数

const {generate} = require('rxjs')

generate(2, x => x <= 10, x => x += 2)
  .subscribe(console.log)
console.log('===')
generate(2, x => x <= 10, x => x += 2, x => '.'.repeat(x))
  .subscribe(console.log)

interval

和js的一致, 每隔一定时间产生一个值, 由0开始

每隔一秒输出一个数值

const {interval} = require('rxjs')
const {take} = require('rxjs/operators')

interval(1000).pipe(
  take(4)
).subscribe(
  console.log
)

never / NEVER

不会发出任何值, 错误, 和完成

const {NEVER} = require('rxjs')
const {startWith} = require('rxjs/operators')

function info() {
  console.log('Will not be called');
}

const result = NEVER.pipe(startWith(7));
result.subscribe(x => console.log(x), info, info);

of

将传入参数, 按照顺序生成值, 并发送

直接送出promise, 不会等到完成后获取值

const {of} = require('rxjs')

function getPromise(val) {
  return new Promise(resolve => {
    setTimeout(
      () => {
        resolve(val)
      }, 1000
    )
  })
}

of(
  [1, 2, 3], 123, 'abc',
  {key: 'val'},
  new Set([1, 2, 3]),
  getPromise(111)
).subscribe(console.log)

repeat

当一个流完成时, 重新订阅源, 默认传入-1表示无穷重复, 可设置重复次数

const {of} = require('rxjs')
const {repeat} = require('rxjs/operators')

of(1, 2, 3).pipe(
  repeat(3)
).subscribe(console.log)

repeatWhen

当流完成后, 在传入的函数返回的流产生时重新订阅源流

const {of, interval} = require('rxjs')
const {repeatWhen, take} = require('rxjs/operators')

const source$ = interval(1000).pipe(take(3))
of(1).pipe(
  repeatWhen(() => source$)
).subscribe(console.log)

range

产生一个数字序列, 参数为: 开始值, 和数列长度

const {range} = require('rxjs')
range(1, 3).subscribe(console.log)

throwError

产生一个序列, 只抛出一个错误

const {throwError} = require('rxjs')

throwError(new Error('error')).subscribe(
  val => console.log('val', val),
  err => console.log('err', err),
  complete => console.log('complete')
)

timer

两个参数: 等待时间, 间隔时间

间隔时间默认为undefined, 则只会执行一次

等待一秒后, 每隔100ms后产生一个数值

const {timer} = require('rxjs')
let st = +new Date()
timer(1000, 100).subscribe(v => {
  let now = +new Date()
  console.log(now - st, v)
  st = now
})