Angular 2 Http,Observables和递归请求

发布时间：2020-12-17 07:53:32 所属栏目：安全来源：网络整理

导读：我有一个REST端点,它返回一个项目列表,一次最多1000个项目.如果有超过1000个项目,则响应具有HTTP状态206,并且我可以在下一个获取更多项目的请求中使用Next-Range标头. 我正在研究一个Angular 2应用程序并试图用Http和Observable实现它.我的问题是我不知道如

我有一个REST端点,它返回一个项目列表,一次最多1000个项目.如果有超过1000个项目,则响应具有HTTP状态206,并且我可以在下一个获取更多项目的请求中使用Next-Range标头.

我正在研究一个Angular 2应用程序并试图用Http和Observable实现它.我的问题是我不知道如何合并多个Observable,具体取决于有多少个页面,最后返回一个我的组件可以订阅的Observable.

这是我使用当前TypeScript实现的地方：

// NOTE: Non-working example!

getAllItems(): Observable<any[]> {
  // array of all items,possibly received with multiple requests
  const allItems: any[] = [];

  // inner function for getting a range of items
  const getRange = (range?: string) => {
    const headers: Headers = new Headers();
    if (range) {
      headers.set('Range',range);
    }

    return this.http.get('http://api/endpoint',{ headers })
      .map((res: Response) => {
        // add all to received items
        // (maybe not needed if the responses can be merged some other way?)
        allItems.push.apply(allItems,res.json());

        // partial content
        if (res.status === 206) {
          const nextRange = res.headers.get('Next-Range');

          // get next range of items
          return getRange(nextRange);
        }

        return allItems;
      });
  };

  // get first range
  return getRange();
}

但是,这不起作用.如果我理解正确,则返回Observable作为初始Observable的值而不是项数组.

您可以使用expand运算符实现此功能.你真正想要做的是创建一个递归的flatmap.这正是操作符扩展的目的.

以下是其工作原理的代码段：

let times = true;
// This is a mock method for your http.get call
const httpMock = () => {
  if(times) {
    times = false;
    return Rx.Observable.of({items: ["1","2","3"],next: true});
  } else {
    return Rx.Observable.of({items: ["4","5","6"],next: false});
  }
}

httpMock()
  .expand(obj => {
    // In your case,the obj will be the response
    // implement your logic here if the 206 http header is found
    if(obj.next) {
      // If you have next values,just call the http.get method again
      // In my example it's the httpMock
      return httpMock();
    } else {
      return Rx.Observable.empty();
    }
  })
  .map(obj => obj.items.flatMap(array => array)) 
  .reduce((acc,x) => acc.concat(x),[]);
  .subscribe((val) => console.log(val));

我们做的是模拟第一个http请求,它具有true的’next’属性.这符合您的206标头.然后我们进行第二次调用,其中’next’属性为false.

结果是一个包含两个请求的结果的数组.由于扩展运算符,它也适用于更多请求.

工作jsbin示例可以在这里找到：http://jsbin.com/wowituluqu/edit?js,console

编辑：更新以使用从数组返回数组的http调用,最终结果是包含数组中所有元素的单个数组.

如果您希望结果中包含来自请求的单独数组的数组,只需删除flatmap并直接返回项目.在这里更新codepen：
http://codepen.io/anon/pen/xRZyaZ?editors=0010#0

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!