rxjs6学习笔记----持续更新

rxjs版本是当前2018-07-23最新， "rxjs": "^6.2.2"。

导入模块的区别

rxjs已经出到6了，5.5有一个大更新，6又有很多更新。首先是自动rethrow的错误不再是同步的，而是异步的，其次是模块导入的方法。现在只分为两类，前一类，如of, empty等方法，直接从rxjs里导入。

正确的导入方式：

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, combineLatest, SubscriptionLike, PartialObserver } from 'rxjs';
import { map, filter, scan } from 'rxjs/operators';
import { webSocket } from 'rxjs/webSocket';
import { ajax } from 'rxjs/ajax';
import { TestScheduler } from 'rxjs/testing';

注意concat和combineLatest都要从rxjs里Import

pipe

rxjs5.5以上使用pipe方法而非链式调用。所有链式的起点都用Pipe来开始，之后的每一次处理都用逗号隔开。例子

// rxjs v5.5+
const source$ = range(1, 3)
const liveStreaming$ = source$.pipe(
  flatMap(val => of(val).pipe(
    flatMap(val => from(fetch(`http://swapi.co/api/people/${val}`))),
    flatMap(res => from(res.json())),
    map(res => res.name),
    tap(console.log)
  ))
)

//rxjs old version
let stream$ = Rx.Observable
.of(1,2,3)
.flatMap((val) => {
  return Rx.Observable
            .of(val)
            .ajax({ url : url })
            .map((e) => e.response )
})

再比如一个concat的例子

import {
  interval, concat,
} from 'rxjs'
import {
  take, map,  tap,
} from 'rxjs/operators'

function addItem(val) {
  const node = document.createElement('li')
  const textnode = document.createTextNode(val)
  node.appendChild(textnode)
  document.getElementById('output').appendChild(node)
}
const s1$ = interval(1000).pipe(
  map(val => `s1   ${val}`),
  take(5)
)

const s2$ = interval(500).pipe(
  map(val => `s2  ${val}`),
  take(3)
)

const liveStreaming$ = concat(s1$, s2$).pipe(
  tap(console.log)
)

const subscription = liveStreaming$.subscribe(
  data => addItem(`${data}`),
  err => console.log(err),
  () => console.log('completed')
)

操作符

学习资源

rxjs5的中文gitbook，略老但排版好看，适合入门
[]