rxjs操作符整合

pairwise():将当前值和前一个值作为数组放在一起,然后将其发出
debounce :保留符合我的规则的,不符合我的规则的抛弃掉
debounceTime(300)://根据设定的时间保留序列,例如模糊查询,每次都是在300毫秒后发起请求(只保留300毫秒后的流)
debounceTime、throttleTime类似 lodash 的 debounce 和 throttle,用来降低事件的触发频率。我们做搜索时,常常要对输入进行 debounce 来减少请求频率。
debounce(() => Rx.Observable.interval(300)); 和debounceTime(300)的效果是一样的
tap 操作符和订阅并不相同,tap 返回的 Observable 如果没有被订阅,tap 中产生副作用的函数并不会执行。
repeat:repeat 用来重复上游 Observable
pluck 类似 lodash 的方法 pluck,提取对象的嵌套属性的值。
toArray:将发出的数据汇聚为数组
partition:将上游的 Observable 分为两个,一个 Observable 的数据是符合判定的数据,另一个时不符合判定的数据。
combineAll:将高阶Observable转化为一阶。当外层Observable结束时,对每个内层Observable使用combineLastest,并最终以数组项的形式返回每个内层Observable的最新值。

combineLatest(text1,text2,(a,b) => a*b)//只有两个都有值的时候才会计算;
btnClickStream.withLatestFrom(zipInputStream,(click, zip) => zip):
    结果是一个数组;以这个流为主,当这个流发生变化的时候去取另外一饿流的最新值,意思就是只要接收到            
    btnClickStream发射过来的值,它就会从zipInputStream中获取最新的值,然后把这两个值传到处理函 
    数上(withLatestFrom第二个参数)


zip(text1,text2,(a,b) => a*b)//会找对应序列的前一个值,一一对其

from: 可以将可遍历的对象(iterable)转化为一个 Observable,字符串也部署有 iterator 接口,所以也支持。 还可以根据 promise 创建一个 Observable。我们用 fetch 或者 axios 等类库发送的请求都是一个 promise 对象,我们可以使用 from 将其处理为一个 Observable 对象。


metga()//按照每个流的顺序叠加成一个流
take(3) 是从数据流中选取最先发出的3条数据
takeLast 是从数据流中选取最后发出的若干数据
takeUntil 是从数据流中选取直到发生某种情况前发出的若干数据
first 是获得满足判断条件的第一个数据,和take(1) 的结果一样
last 是获得满足判断条件的最后一个数据
skip 是从数据流中忽略最先发出的若干数据eg:skip(2)就是跳过值为2的流
skipLast 是从数据流中忽略最后发出的若干数据


setinterval(200)//每200毫秒运行一次;
// .interval(): 每隔一段时间发射一次
const interval$ = Rx.Observable.interval(100);
interval$.subscribe(
  val => console.log(val),
  err => console.log(err),
  () => console.log('Im am a complete')
);
// 这样会进入无尽序列;只会走next方法;
// 然后我们加一个限制条件.take(3);就会在第四次的时候停下来进入complete结束状态
const interval$ = Rx.Observable.interval(100).take(3);
.timer(100,300):100浩渺后执行,然后每300毫秒运行一次; 一个参数的时候就是在100毫秒后执行,两个参数的话,第二个参数表示之后要以300毫秒一次的频率发送
.do() :用来查看当前值是多少;和外部交互的桥梁,起到临时subscribe的作用,并且没有这个中断流;
eg:
let cur = '';
const interval$ = Rx.Observable.interval(100)
  .map(val => val * 2)
  .do(d => {
    cur = d;
    console.log(d);
 }).take(3);

.filter(): 过滤,只有当返回为true的时候才会返回出去

.scan() :记住了之前的运算结果;接受一个函数作为参数: (x,y) => {return x+y} return的结果又作为新的参数传进去,类似递归
const interval$ = Rx.Observable.interval(100)
  .map(val => val % 2 ===0)
  .scan((x,y) => {return x+y}).take(4);
结果为0 2 6 12;

.reduce(): 把序列中的所有做最后一次的运算,如果没有结尾就会形成无尽序列
const interval$ = Rx.Observable.interval(100)
  .map(val => val % 2 ===0)
  .take(4)
  .reduce((x,y) => {return x+y});

  .reduce((x,y) => {return [...x,y]}, []);//也可以默认给一个空数组,然后把前面的值都填充到数组中,结果就是[0,2,4,6]
结果为12;


distinct:把所有序列中重复的抛弃掉,只留不一样的,例如输入123,当再次输入2的时候将不会有流输出(无尽序列会有内存隐患)
distinctUntilChanged: //只和前面的比较,如果前一个元素和他一样九抛弃掉,如果不一样九保留下来


startWith、forkJoin、race
    startWith:赋出初始值,以防初始没有值,在序列前面加一个值;通常用来赋初始值startWith(10)
    forkJoin 只有静态方法形式,类似 Promise.all ,它会等内部所有 Observable 都完结之后,将所有 Observable 对象最后发出来的最后一个数据合并成 Observable。
    race 操作符产生的 Observable 会完全镜像最先吐出数据的 Observable。


merge:对多个流按照时间顺序进行合并,
concat:对接,把两个流连接在一起;第一个流执行完后再执行第二个流(前提是第一个流不是无穷序列)
switch() 用于取消前一个订阅,并切换至新的订阅,

concatAll、mergeAll、switchAll
    * 用来将高阶的 Observable 对象压平成一阶的 Observable,和 loadash 中压平数组的 flatten 方法类似。
    * concatAll 会对内部的 Observable 对象做 concat 操作,和 concat 操作符类似,如果前一个内部 Observable 没有完结,
    * 那么 concatAll 不会订阅下一个内部 Observable,mergeAll 则是同时处理。switchAll 比较特殊一些,
    * 它总是切换到最新的内部 Observable 对象获取数据。上游高阶 Observable 产生一个新的内部 Observable 时,
    * switchAll 就会立即订阅最新的内部 Observable,退订之前的,这也就是 ‘switch’ 的含义。

concatMap、mergeMap、switchMap
高阶 Observable 常常是由 map 操作符将每个数据映射为 Observable 产生的,
我们订阅的时候需要将高阶Observable压平为一阶 Observable,
而就是要先使用 map 操作符再使用 concatAll 或 mergeAll 或 switchAll 这些操作符中的一个。
RxJS 中提供了对应的更简洁的 API。使用的效果可以用下面的公式表示:
    * concatMap = map + concatAll
    * mergeMap = map + mergeAll
    * switchMap = map + switchAll

注:flatMapLatest在RxJS 5.x中已更名为switchMap,具体用法,可以去百度


buffer、bufferTime、bufferCount、bufferWhen、bufferToggle
缓存把上游的多个数据缓存起来,当时机合适时再把汇聚的数据传给下游。
* buffer 接收一个 Observable 作为 notifier,当 notifier 发出数据时,将 缓存的数据传给下游。
* bufferTime 是用时间来控制时机,上面可以改成 bufferTime(1000)
* bufferCount 是用数量来控制时机,如 3 个一组,bufferCount(3)
* bufferWhen 接收一个叫做 closeSelector 的参数,它应该返回一个 Observable。通过这个 Observable 来控制缓存。这个函数没有参数。下面的方法等价于前面的 buffer:.
* bufferToggle 和 buffer 的不同是可以不断地控制缓存窗口的开和关,一个参数是一个 Observable,称为 opening,
第二个参数是称为 closeSelector 的一个函数。这个函数的参数是 opening 产生的数据。
前一个参数用来控制缓存的开始时间,后一个控制缓存的结束。与 bufferWhen 相比,它的 closeSelector 可以接收参数,控制性更强。
我们可以使用 buffer 来做事件的过滤,下面的代码只有 500ms 内连续点击两次以上才会输出 ‘success’ 。

window、windowTime、windowCount、windowWhen、windowToggle
与前面的 buffer 类似,不过 window 缓存数据汇聚的形式是 Observable,因此形成了高阶 Observable。


dalay、delayWhen
用来延迟上游 Observable 数据的发出。
delay 可以接受一个数字(单位默认为 ms)或者 date 对象作为延迟控制。
delayWhen 也带有 when,在 RxJS 中,这种操作符它接收的参数都是 Observable Factory,即一个返回 Observable 对象的回调函数,用这个 Observable 来进行控制。


catchError 中的回调函数返回了一个 Observable,当捕获到上游的错误时,调用这个函数,返回的 Observable 中发出的数据会传递给下游。因此上面当 x 为4 时发生了错误,会用 8 来替换。
回调函数除了接收错误对象为参数外,还有第二个参数 caught$ 表示上游的 Observable 对象。如果回调函数返回这个 Observable 对象,就会进行重试。
eg:
 interval(1000).pipe(
   take(6),
   map(x => {
     if (x === 4) {
       throw new Error('unlucky number 4')
     } else {
       return x
     }
   }),
   catchError(err => of(63))  // 当报错时用63代替
 ).subscribe(x => console.log(x))

eg:
interval(1000).pipe(
   take(6),
   map(x => {
     if (x === 4) {
       throw new Error('unlucky number 4')
     } else {
       return x
     }
   }),
   catchError((err, caught$) => {console.log(caught$);return caught$}), // 返回上游的 Observable 对象,进行重试
   take(20)
 ).subscribe(x => console.log(x))

retry 可以接收一个整数作为参数,表示重试次数,如果是负数或者没有传参,会无限次重试。重试实际上就是退订再重新订阅。(遇到错误重试)
retryWhen 和前面带 when 的操作符一样,retryWhen 操作符接收一个返回 Observable 的回调函数,用这个 Observable 来控制重试的节奏。当这个 Observable 发出一个数据时就会进行一次重试,它完结时 retryWhen 返回的 Observable 也立即完结。
retryWhen 的可定制性非常高,不仅可以实现延迟定制,还可以实现 retry 的控制重试次数。在实践中,这种重试频率固定的方法还不够好,如果之前的重试失败,之后重试成功的几率也不高。Angular 官网介绍了一个 Exponential backoff 的方法。将每次重试的延迟时间控制为指数级增长

eg:
interval(1000).pipe(
  take(6),
  map(x => {
    if (x === 4) {
      throw new Error('unlucky number 4')
    } else {
      return x
    }
  }),
  retry(5) // 重试 5 次
).subscribe(x => console.log(x))
eg:
interval(1000).pipe(
  take(6),
  map(x => {
    if (x === 4) {
      throw new Error('unlucky number 4')
    } else {
      return x
    }
  }),
  retryWhen(err$ => err$.pipe(
    delay(3000),
    take(5))
  ) // 延迟 1 秒后重试,重试 5 次
).subscribe(x => console.log(x))


finalize:返回上游数据流的镜像 Observable,当上游的 Observable 完结或出错时调用传给它的函数,不影响数据流。
eg:
interval(1000).pipe(
  take(6),
  map(x => {
    if (x === 4) {
      throw new Error('unlucky number 4')
    } else {
      return x
    }
  }),
  finalize(() => console.log('finally'))
).subscribe(x => console.log('a'))



bufferWhen,windowWhen,delayWhen,retryWhen
带有 when,在 RxJS 中,这种操作符它接收的参数都是 Observable Factory,即一个返回 Observable 对象的回调函数,用这个 Observable 来进行控制。


concatAll:将高阶Observable转化为一阶。并将结果以链式拼接的形式进行发射。
combineAll:将高阶Observable转化为一阶。当外层Observable结束时,对每个内层Observable使用combineLastest,并最终以数组项的形式返回每个内层Observable的最新值。
combineLastest:每当其中一个Observable发射值时,都会以数组的形式发射两个Observable的最新值。
concat:链式拼接两个Observable的结果
exhaust:将高阶Observable转化为一阶。并将结果以链式拼接的形式进行发射。但是,当前一个内层Observable的值还没有发射完毕时,不会接受下一个内层Observable,并不会把它的值拼接到外层Observable中。
forkJoin:将多个Observable进行并行计算,并数组的形式返回它们各自的最新值
merger:将两个Observable进行合并,每当其中一个Observable发射值时,都会被外层Observer所收到
mergeAll:将多个Observable进行合并,每当其中一个Observable发射值时,都会被外层Observer所收到。
withLastestFrom:每当源Observable发射新的值时,会以数组的形式,把源Observable和另一个Observable的最新值进行组合并发射。
zip:组合多个Observable,并生成一个新的Observable,其值能够通过每个Observable的值,和自定义函数进行定义。




监听变量的变化:

const sub$ = new Subject()

function a() {
  sub$.next(1)
}

function b() {
  sub$.next(2)

}

function c() {
  sub$.next(3)
}

sub$.subscribe(value => {
  console.log(value)
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值