最近在做一个项目,图书借阅系统。
在图书详情页面有两部分内容,一是图书详情;二是图书借阅记录列表。
两部分数据是通过图书 id 从 api 获取,现在的需求是:两部分数据全部从 api 返回才显示页面,其中有一部分的数据还没从 api 返回,页面显示的是 loading 状态。
api 请求数据代码如下:
ngOnInit() {
this.loaded = false;
let bookStream = this.bookService.getBook(1);
let bookLogsStream = this.bookLogService.getLogs(1);
let mergedStream = bookStream.merge(bookLogsStream);
mergedStream.subscribe(bookOrBookLogs => {
console.log(bookOrBookLogs);
}, e => { // handle error here
}, () => { // complete handler
console.log('complete');
this.loaded = true;
});
}
无论是 bookStream
的数据先回来还是 bookLogsStream
的数据先回来都是执行 observer
的 next
方法,在这里就是 function(bookOrBookLogs) { console.log(bookOrBookLogs); }
两部分的数据返回后,就会执行 complete
方法;
RxJS 教程,可参考:RxJS教程