RxJS基本介紹

基本概念

Observable 可觀察對象

• 表示一些事件的集合。
• 經過Observable.subscribe(fnValue,fnError,fnComplete)來獲取數據、錯誤、完成事件。
• 經過Observable.unsubscribe()來清除它。

let Observable = Rx.Observable.create((observer) => {
  observer.next(1); // fnValue 
  observer.next(2); // fnValue 可調用屢次
  observer.error(); // fnError
  observer.complete(); // fnComplete
  
  return function(){
    clear(); // 清除邏輯
  }
});

Observable.subscribe(
(data) => console.log('Data', data),
(error) => console.log('Error', error),
(complete) => console.log('Complete', complete),
);

Observable.unsubscribe(); // 清除了Observable
複製代碼

Observer 觀察者

• 一個回調函數的集合，負責監聽由 Observable 提供的值。
• 觀察者只是有三個回調函數的對象，每一個回調函數對應一種 Observable 發送的通知類型。
• 一個完整的observer對象包含next()、error()、complete()方法。
• 經過上述三個方法來驅動Observable。

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
複製代碼

Observable包裝

• 建立自定義邏輯的Observable對象。
• 經過next()、error()、complete()來驅動。

let stream = Rx.Observable.create((observer) => {
   let request = new XMLHttpRequest();

   request.open( "GET","url");
   request.onload =() =>{
      if(request.status === 200) {
         observer.next( request.response );
         observer.complete();
     } else {
          observer.error('error happened');
     }
   }

   request.onerror = () => {  
       observer.error('error happened')
   }
   request.send();
})

stream.subscribe(
   (data) => console.log( data )  
)
複製代碼

Operators 操做符

• rxjs的靈魂核心，rxjs的強大正是由於有了功能豐富的操做符。
• 沒有操做符的rxjs的就比如是沒有黃家駒的beyond的。