Angular--（六）Rxjs异步数据流编程

一、Rxjs介绍

RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。

RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。

二、 Promise和RxJS处理异步对比

Promise 处理异步:

let promise = new Promise(resolve => { setTimeout(() => {
        resolve('---promise timeout---'); 
    }, 2000);
});
promise.then(value => console.log(value));

RxJS 处理异步:

import {Observable} from 'rxjs';
let stream = new Observable(observer => { setTimeout(() => {
    observer.next('observable timeout'); }, 2000);
});
stream.subscribe(value => console.log(value));

从上面列子可以看到 RxJS 和 Promise 的基本用法非常类似，除了一些关键词不同。Promise 里面用的是 then() 和 resolve()，而 RxJS 里面用的是 next() 和 subscribe()。

从上面例子我们感觉Promise 和 RxJS 的用法基本相似。其实Rxjs相比Promise 要强大很多。 比如 Rxjs 中可以中途撤回、Rxjs 可以发射多个值、Rxjs 提供了多种工具函数等等。

三、 Rxjs unsubscribe 取消订阅

Rxjs 可以通过 unsubscribe() 可以撤回 subscribe 的动作

let stream = new Observable(observer => { 
    let timeout = setTimeout(() => {
	clearTimeout(timeout);
	observer.next('observable timeout'); }, 2000);
});

let disposable = stream.subscribe(value => console.log(value)); 

setTimeout(() => {
    //取消执行 
    disposable.unsubscribe();
}, 1000);