angular4 http RxJS Observable observer演示

angular4 http RxJS Observable observer

Observable 可觀察對象(觀察者們), Observer 觀察者;

Observable就像快遞公司, Observer是快遞小哥, 那生產者, 消費者呢? 他們直接喊快遞公司就行啦

首先學會 Http 類的用法

1. 組件中 引入 Http

// 引入模塊
import { Http } from "@angular/http";
// 注入
@Injectable()
export class ApiService {
  constructor(public http: Http){}

1. 使用方法, 經過 angular http 返回的就是一個 Observable

this.http
      //map 操做符返回一個新的 Observable 對象
      .map((r, err) => { return r })
      //filter 操做符執行過濾操做，而後又返回一個新的 Observable 對象
      .filter(r => r.length >= 2)
      // 抖動時間
      .debounceTime(1000)
      //subscribe 操做符, 啓動訂閱
      .subscribe( //訂閱
        r => {
          // r 接收訂閱成功後返回的數據
        },
        err => {
          // 錯誤時的數據
        })
      // 錯誤處理
      .catch(err=>{})

好吧, 這個我知道, 怎麼本身建立一個呢?

// 建立一個觀察者
const myserver = (observer) => {
  // 返回數據
  observer.next('data')
  // 返回錯誤
  observer.error()
  // 結束
  observer.complete()
  // 關閉
  observer.closed()
}

// 創建可觀察對象 Observable
const obs = new Observable(myserver)
// 訂閱
obs.subscribe(r =>{ console.log(r)})

下面的 myhttp 函數演示了從一個 Get 請求獲取 json 並緩存下來的例子,

let mydata
myhttp(): Observable<any> {
  if (mydata) {
    // 將緩存的數據 mydata 以 Observable 返回
    return new Observable((server: Observer<any>) => {
      server.next(mydata)
      server.complete()
    })
  } else {
    // 經過 Angular Http 獲取數據
    return this.http.get('data.json')
    .map(r => {
      // 寫入本地 mydata
      mydata = r
      return r
    })
  }
}