当前位置 : 首页 » 互动问答 » 正文

如何使用Angular4中的Observables从后端API检索分页的HTTP请求

分类 : 互动问答 | 发布时间 : 2017-10-04 19:58:11 | 评论 : 2 | 浏览 : 58 | 喜欢 : 0

我在角度4应用程序中获得了一项服务,它从后端API检索可变数量的页面。

我在这里查看了 Angular 2 - 链接http请求的答案,它建议使用flatMap,但这种方法不起作用,因为它要求事先知道所有的请求。这不适用于我的情况,因为请求的数量和每个请求的url都是动态的,并且是未知的。

从上一个请求的结果推断页数/请求数。因此,如果前一个请求返回任何内容,则会请求下一个页面查看是否还有更多项目。

我尝试了下面的

 this.items = [];
_fetch(url,page){
    this.http.get(`$ {url}&pageSize = 2&page = $ {page}`).subscribe(response => {
    this.items.concat(response.json()。项)
    //如果项目列表不为空则获取另一个页面
    if(response.json()。items.length> 0){
      this._fetch(url,++ page);
    }
  });
  返回Observable.of(this.items);
}
在请求有机会完成之前返回

However this.items,因此它总是作为空列表返回。

any ideas?

回答(2)

  • 1楼
  • 您可以使用flatMap将观察值链接在一起

     fetch(url){
        返回this.http.get(`$ {url} / initial-api /`)
            .flatMap(res => {
                让page = res.page
    
                返回this.get(`$ {url}&pageSize = 2&page = $ {page}`);
            });
    }
    

    现在,当您订阅可观察序列时,它会将apis链接在一起

    以下是关于flatMap / mergeMap:的一个很好的解读:https://coryrylan.com/blog/angular-multiple-http -requests-with-rxjs

    flatMap的好处在于它将事物放在一个单独的流中,而不是嵌套的订阅,这会因代码而变得非常混乱。

  • 2楼
  • Since .subscribe返回一个observable,你可以简单地链接它们。只要没有错误,它就会执行第二个:

     this.http.get('some url')。subscribe(result => {
        if(result){
            //很好去执行第二个电话。
            this.http.get('other url')。subscribe(result2 => {
                //对结果1和结果2做一些事情
            })
        } else {
            //处理错误。不要执行第二个呼叫
        }
    },错误=> {
        // 发生了错误。不要执行第二个呼叫
    })
    

    您也可以在应用中设置promise,如下所示:

     firstHttpCall(){
        返回新的Promise((resolve,reject)=> {
            this.http.get('someurl')。subscribe(result => {
                结果(结果);
            },错误=> {
                拒绝(误差);
            });
        });
    }
    secondHttpCall(){
        返回新的Promise((resolve,reject)=> {
            this.firstHttpCall()。then(result => {
                解决(结果);
            },错误=> {
                拒绝(误差);
            });
        });
    }
    someOtherCall(){
        //一些东西...
        this.secondHttpCall()。then(result => {
            // 一切顺利。
        },错误=> {
            // 出了些问题
        })
    }
    

    如果你可以达到不依赖第二个调用中使用的第一个调用值的地步,我会说 Promise.all也是一个可行的选项。

相关阅读: