angular4 http RxJS Observable observer
Observable 可观察对象(观察者们), Observer 观察者;
Observable就像快递公司, Observer是快递小哥, 那生产者, 消费者呢? 他们直接喊快递公司就行啦
首先学会 Http 类的用法
组件中 引入 Http
// 引入模块
import { Http } from "@angular/http";
// 注入
@Injectable()
export class ApiService {
constructor(public http: Http){}
使用方法, 通过 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
})
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。