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
    })
  }
}