RJX
RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据 流的编程。简单来说，它将一切数据，包括 HTTP 请求，DOM 事件或者普通数据等包装成流 的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据， 并组合不同的操作符来轻松优雅的实现你所需要的功能。
RxJS 是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释 RxJS 其目 标就是异步编程，Angular 引入 RxJS 为了就是让异步可控、更简单。
- 目前常见的异步编程的几种方法：
1、回调函数
2、事件监听/发布订阅
3、Promise
4、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 unsubscribe 取消订阅
Promise 的创建之后，动作是无法撤回的。Observable 不一样，动作可以通过 unsbscribe() 方 法中途撤回，而且 Observable 在内部做了智能的处理
- 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);
Rxjs 订阅后多次执行
这一点 Promise 是做不到的，对于 Promise 来说，最终结果要么 resole（兑现）、要么 reject （拒绝），而且都只能触发一次。如果在同一个 Promise 对象上多次调用 resolve 方法， 则会抛异常。而 Observable 不一样，它可以不断地触发下一个值，就像 next() 这个方法的 名字所暗示的那样。
let stream = new Observable<number>(observer => {
let count = 0;
setInterval(() => {
observer.next(count++); },
1000);
});
stream.subscribe(value => console.log("Observable>"+value));
Rxjs 延迟执行
import {Observable,fromEvent} from 'rxjs';
import {map,filter,throttleTime} from 'rxjs/operators';
var button = document.querySelector('button');
fromEvent(button, 'click').pipe( throttleTime(1000) ).subscribe(() => console.log(`Clicked`));
export class HomeComponent implements OnInit {
constructor(public request:RequestService) { }
ngOnInit() {
//1、同步方法
let data=this.request.getData();
console.log(data)
//2、callback获取异步数据
this.request.getCallbackData((data)=>{
console.log(data);
});
//3、promise获取异步数据
var promiseData=this.request.getPromiseData();
promiseData.then((data)=>{
console.log(data);
})
//4、rxjs获取异步方法里面的数据
// var rxjsData=this.request.getRxjsData();
// rxjsData.subscribe((data)=>{
// console.log(data);
// })
//5、过一秒以后撤回刚才的操作
var streem=this.request.getRxjsData();
var d=streem.subscribe((data)=>{
console.log(data);
})
setTimeout(()=>{
d.unsubscribe(); /*取消订阅*/
},1000)
//6、promise 执行多次（没有这个能力）
var intervalData=this.request.getPromiseIntervalData();
intervalData.then((data)=>{
console.log(data);
})
//7、rxjs执行多次
// var streemInterval=this.request.getRxjsIntervalData();
// streemInterval.subscribe((data)=>{
// console.log(data);
// })
//8、用工具方法对返回的数据进行处理
/*
var streemNum=this.request.getRxjsIntervalNum();
streemNum.pipe(
filter((value)=>{
if(value%2==0){
return true;
}
})
)
.subscribe((data)=>{
console.log(data);
})
*/
/*
var streemNum=this.request.getRxjsIntervalNum();
streemNum.pipe(
map((value)=>{
return value*value;
})
)
.subscribe((data)=>{
console.log(data);
})
*/
var streemNum=this.request.getRxjsIntervalNum();
streemNum.pipe(
filter((value)=>{
if(value%2==0){
return true;
}
}),
map((value)=>{
return value*value;
})
)
.subscribe((data)=>{
console.log(data);
})
}
}
