一、 Rxjs

1. 常见的异步编程及对比

目前常见的异步编程的几种方法：

回调函数事件
监听/发布订阅
Promise
Rxjs

 // 同步
 getData(){
	var data='zhangsan';
	return data;
 }
// 下面是异步

1.1 回调函数获取异步数据

// service.ts
getCallBackData(){
①
②	setTimeout(()=>{
④		var data='zhangsan';
		return data;
		},1000);
③	
}

// conmponent.ts
var callBackData=this.service.getCallBackData()
 执行顺序 ：① ② ③ ④ 所以外部获得的callBackData是undefined

那么该如何获取的到呢？用回调函数

// service.ts
getCallBackData(cb){  // 传入一个cb
	setTimeout(()=>{
		var data='zhangsan';
		cb(data);
	},1000);
}

// conmponent.ts
this.service.getCallBackData((data)=>
	console.log(data)
)

1.3 promise 获取异步数据

// service.ts
getPromiseData(){  
	return new 	Promise((resolve)=>{
		setTimeout(()=>{
			var data='zhangsan';
			resolve(data);
		},2000);
	})
}

// conmponent.ts
var promiseData=this.service.getPromiseData();  // 返回的是Promise对象
promiseData.then((data)=>{
	console.log(data);
})

1.4 Rxjs 获取异步数据

// service.ts
import {Observable} from 'rxjs';
getRxjsData(){
	return new Observable((observer)=>{
		setTimeout(()=>{
			var data='zhangsan'; 
			observer.next(data);
			// observer.error('Error');
		},2000);
	})
}

// conmponent.ts
var RxjsData=this.service.getRxjsData();  
RxjsData.subscribe((data)=>{
	console.log(data);
})

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

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

2 Rxjs优势

2.1 Rxjs --中途撤回

// conmponent.ts
var stream=this.service.getRxjsData();  
stream.subscribe((data)=>{
	console.log(data);
})

setTimeout(()=>{
	d.unsubscribe()  取消订阅
},1000)

2.2 Rxjs --多次发送

// service.ts
import {Observable} from 'rxjs';
getRxjsData(){
	let count=0;
	return new Observable((observer)=>{
		setInterval(()=>{   // setInterval 定时器 每隔2000ms触发一次
			count++;
			var data='zhangsan'+count; 
			observer.next(data);
			// observer.error('Error');
			},2000);
		})
}

// conmponent.ts
var RxjsData=this.service.getRxjsData();  
RxjsData.subscribe((data)=>{
	console.log(data);
})

2.3 Rxjs --工具函数 map filter

// service.ts
import {Observable} from 'rxjs';
getRxjsData(){
	let count=0;
	return new Observable((observer)=>{
		setInterval(()=>{  
			var data=count++; 
			observer.next(data);
			// observer.error('Error');
			},2000);
		})
}

// component.ts
import {map,filter} from 'rxjs/operators';

var RxjsData=this.service.getRxjsData();  

RxjsData.pipe(   // 管道
    /// filter 对数据做一些过滤 
    /// 只返回偶数 
	 filter((value)=>{
	 	if(value%2===0){
 			return true
		}
	 }),
	///  map 对数据做一些操作 比如说 后端返回了一个 json 字符串 在这里转换成 json 对象
	/// 返回平方
	map((value)=>{
		return value*value
	})	
)
RxjsData.subscribe((data)=>{
	console.log(data);
})