RXJs

1、 Example

1. 簡單來說就是promise的加強(qiáng)版
   這是個promise的用法

let promise = new Promise(resolve =>{
    setTimeout(() => {
        resolve('--promise timeout ---')
    })
})

promise.then(
    value=>console.log(value)
)

2. Observable 的寫法 相當(dāng)于發(fā)散函數(shù)

let stream1 = new Observable(observer =>{
    let timeout  = setTimeout(()=> {
        observer.next('ibservable timeout ')
    },2000);
    return ()=>{
        clearTimeout(timeout)
    }
})

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

2、不同點

1. 中間禁止

• promisem沒辦法中途禁止
• observer是可以中間禁止的
  • disposable.unsubscribe()

2 observer可以發(fā)射很多的值

• promise只能resolve一次，兌現(xiàn)一次就不能resolve了
• 但是observe可不斷的next

3.observer 有很多的工具函數(shù)

• promise沒有什么函數(shù)
• 如下的

// 因為會源源不斷的發(fā)送，所以可以甄別
//進(jìn)行過濾的函數(shù)
stream2.filter(val=>val%2==0)
.subscribe(val=>console.log("filter=>"+val))

//進(jìn)行map的函數(shù)
//對每個值進(jìn)行平方
stream2.map(val=>val*val)
.subscribe(val=>console.log("filter=>"+val))

underscore.js為我們擴(kuò)展了很多的實用性工具函數(shù)/方法
同理，RxJs上邊添加了很多的工具函數(shù)

3、應(yīng)用的場景

//場景1 發(fā)送請求

public getPostList(searchText:string ,page:number=1) Observable<Post[]>{
    let url  = thie .postListURL;
    let params  = new URLSearchParams();//這里組織需要提交到后臺的代碼
    if( searchText){
        params.set("search",searchText);
        url=this.postListUrL;
        cosnole.log('searchText==${searchText}');
    }
    params.set("page",string(page));


    return this.http
    .get(url,{search:params})
    .map((rse:Response)=>{
        let result = res.json();
        console.log(result);
        return;
    })
    .catch((error:any)=>Observable.throw(error||'Server error '));

}
//如果是post請求的話

let data =new URLSearchParams();
data.append("email",user.email);
data.append("PASSWORD",user.OASSWIRD);
return this.http.post(this.userRegisterURL,data)


//場景2：事件處理

對每次按鍵發(fā)起請求

this.searchTextStrwam.debounceTime(500)//如果發(fā)現(xiàn)用戶在一定時間內(nèi)不在按鍵盤， 去抖動操作
.distinctUntilChange()//除非輸入框輸入的內(nèi)容和上一次不一樣，要不就不進(jìn)行操作
.subscribe(searchText=>{
    console.log(this.searchText);
    })


詳情請見 angular2的各種事件機(jī)制