RxJS 合并流

分类:JavaScript     发布时间:2017-04-20     最后更新:2020-11-19     浏览数:2305
应用 RxJS 合并流

最近在做一个项目,图书借阅系统。

在图书详情页面有两部分内容,一是图书详情;二是图书借阅记录列表。

两部分数据是通过图书 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 的数据先回来都是执行 observernext方法,在这里就是 function(bookOrBookLogs) { console.log(bookOrBookLogs); } 两部分的数据返回后,就会执行 complete 方法;

RxJS 教程,可参考:RxJS教程

上一篇: CSS 盒子模型 下一篇: Flex流式布局好文推荐