RJX
RxJS 是 ReactiveX 編程理念的 JavaScript 版本贯涎。ReactiveX 來自微軟惹盼，它是一種針對異步數(shù)據(jù) 流的編程。簡單來說，它將一切數(shù)據(jù)甘萧，包括 HTTP 請求，DOM 事件或者普通數(shù)據(jù)等包裝成流 的形式昆箕，然后用強大豐富的操作符對流進行處理辕羽，使你能以同步編程的方式處理異步數(shù)據(jù)， 并組合不同的操作符來輕松優(yōu)雅的實現(xiàn)你所需要的功能吨些。
RxJS 是一種針對異步數(shù)據(jù)流編程工具搓谆，或者叫響應式擴展編程；可不管如何解釋 RxJS 其目 標就是異步編程豪墅，Angular 引入 RxJS 為了就是讓異步可控泉手、更簡單。
- 目前常見的異步編程的幾種方法：
1偶器、回調(diào)函數(shù)
2斩萌、事件監(jiān)聽/發(fā)布訂閱
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 的創(chuàng)建之后颊郎，動作是無法撤回的憋飞。Observable 不一樣，動作可以通過 unsbscribe() 方 法中途撤回姆吭，而且 Observable 在內(nèi)部做了智能的處理
- 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(() => {
//取消執(zhí)行 disposable.unsubscribe();
}, 1000);
Rxjs 訂閱后多次執(zhí)行
這一點 Promise 是做不到的榛做，對于 Promise 來說，最終結果要么 resole（兌現(xiàn)）内狸、要么 reject （拒絕）瘤睹，而且都只能觸發(fā)一次。如果在同一個 Promise 對象上多次調(diào)用 resolve 方法答倡， 則會拋異常轰传。而 Observable 不一樣，它可以不斷地觸發(fā)下一個值瘪撇，就像 next() 這個方法的 名字所暗示的那樣获茬。
let stream = new Observable<number>(observer => {
let count = 0;
setInterval(() => {
observer.next(count++); },
1000);
});
stream.subscribe(value => console.log("Observable>"+value));
Rxjs 延遲執(zhí)行
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獲取異步數(shù)據(jù)
this.request.getCallbackData((data)=>{
console.log(data);
});
//3恕曲、promise獲取異步數(shù)據(jù)
var promiseData=this.request.getPromiseData();
promiseData.then((data)=>{
console.log(data);
})
//4、rxjs獲取異步方法里面的數(shù)據(jù)
// 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 執(zhí)行多次（沒有這個能力）
var intervalData=this.request.getPromiseIntervalData();
intervalData.then((data)=>{
console.log(data);
})
//7、rxjs執(zhí)行多次
// var streemInterval=this.request.getRxjsIntervalData();
// streemInterval.subscribe((data)=>{
// console.log(data);
// })
//8实蓬、用工具方法對返回的數(shù)據(jù)進行處理
/*
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);
})
}
}
