rxjs学习

推荐一个好的网站：http://cn.rx.js.org/manual/overview.html#-

https://rxjs-cn.github.io/learn-rxjs-operators/operators/error_handling/catch.html

https://segmentfault.com/a/1190000010599259

创建的操作符有哪些

timer

// 1秒后发出0，然后结束，因为没有提供第二个参数
const source = Rx.Observable.timer(1000);

/*
  timer 接收第二个参数，它决定了发出序列值的频率，在本例中我们在1秒发出第一个值，
  然后每2秒发出序列值
*/
const source = Rx.Observable.timer(1000, 2000);

 throw

// 在订阅上使用指定值来发出错误
const source = Rx.Observable.throw('This is an error!');

 range

// 依次发出1-10
const source = Rx.Observable.range(1,10);
// 输出: 1,2,3,4,5,6,7,8,9,10
const example = source.subscribe(val => console.log(val));

catch：

// 发出错误
const source = Rx.Observable.throw('This is an error!');
// 优雅地处理错误，并返回带有错误信息的 observable
const example = source.catch(val => Rx.Observable.of(`I caught: ${val}`));
// 输出: 'I caught: This is an error'
const subscribe = example.subscribe(val => console.log(val));

map   flatmap   switchmap：

在这篇文章中我会对map,flatMap和flatMapLatest三个操作符进行比较，下面我们来举个例子。

let stream = Observable.interval(1000).take(10);
return stream.map(n => n * 2);

上面的代码模拟了异步行为，每隔1s发射一个数字。这个例子很简单，你会随着时间推移得到一连串的数字。

我们再来看另一个例子。

let stream = Observable.interval(1000).take(10);
return stream.map(n => Observable.timer(500).map(() => n));

这里stream会返回一个Observable而不是数字。

如果我想要拿到那些数字，我该怎么办？

let stream = Observable.interval(1000).take(10);
return stream.flatMap(n => Observable.timer(500).map(() => n));

这里使用了flatMap而不是map。flatMap将响应数据“打平”，也就是说把映射后新的Observable转化为了数据流，订阅之后会获得这个新Observable发射的数据，而不是Observable本身。

译者注：flatMap有一个很适用的场景，就是搜索框。在用户输入一串字符后，将其发送到服务器并获取搜索结果，这里就涉及到两个Observable。

Observable
.fromEvent($input, 'keyup')
.flatMap(text => getHttpResponse(text))
.subscribe(data => console.log(data))

使用flatMap就可以直接获取到新的Observable返回的数据。但是这里存在一个问题，如果用户有多次输入，由于网络原因可能会发生前一次响应时间比后一次长的情况，这时后一次的结果就被覆盖了。
flatMapLatest可以解决这个问题。如果之前的Observable还没有未触发，而又收到了新的Observable，flatMapLatest会取消之前的Observable，只处理最新收到的Observable，这样就保证了处理请求的先后顺序，flatMapLatest在RxJS 5.x中已更名为switchMap。

public:

// 每1秒发出值
const source = Rx.Observable.interval(1000);
const example = source
  // 副作用只会执行1次
  .do(() => console.log('Do Something!'))
  // 不会做任何事直到 connect() 被调用
  .publish();

/*
  source 不会发出任何值直到 connect() 被调用
  输出: (5秒后)
  "Do Something!"
  "Subscriber One: 0"
  "Subscriber Two: 0"
  "Do Something!"
  "Subscriber One: 1"
  "Subscriber Two: 1"
*/
const subscribe = example.subscribe(val => console.log(`Subscriber One: ${val}`));
const subscribeTwo = example.subscribe(val => console.log(`Subscriber Two: ${val}`));

// 5秒后调用 connect，这会使得 source 开始发出值
setTimeout(() => {
 example.connect(); 
},5000)

share:

// 1秒后发出值
const source = Rx.Observable.timer(1000);
// 输出副作用，然后发出结果
const example = source
  .do(() => console.log('***SIDE EFFECT***'))
  .mapTo('***RESULT***');
/*
  ***不共享的话，副作用会执行两次***
  输出: 
  "***SIDE EFFECT***"
  "***RESULT***"
  "***SIDE EFFECT***"
  "***RESULT***"
*/
const subscribe = example.subscribe(val => console.log(val));
const subscribeTwo = example.subscribe(val => console.log(val));

// 在多个订阅者间共享 observable
const sharedExample = example.share();
/*
  ***共享的话，副作用只执行一次***
  输出: 
  "***SIDE EFFECT***"
  "***RESULT***"
  "***RESULT***"
*/
const subscribeThree = sharedExample.subscribe(val => console.log(val));
const subscribeFour = sharedExample.subscribe(val => console.log(val));