如何在角度递归执行HTTP请求



我需要向包含帖子列表和总帖子的关键的端点提出get请求。

{
    posts: [{}, {}, {}, ...],
    total: 1000
}

偏移为请求确定帖子数量返回的数量。

// request
https://postBalzer.com/posts?offset=0&limit=50

此请求返回0-50的帖子如何使呼叫递归递归,直到使用Angular HttpClientModule获取所有帖子。

在这种情况下,如何使用扩展RXJS操作员?

这可以在RXJ中使用expand运算符,如下所示:

import {HttpParams} from '@angular/common/http';
import {Observable, empty} from 'rxjs';
import {expand, map, reduce} from 'rxjs/operators';
export interface PostResponse {
  posts: object[];
  total: number;
}
@Injectable()
export class Service {
  private readonly baseUrl = '...';
  constructor(private http: HttpClient) {
  }
  getPosts(chunkSize: number): Observable<object[]>
  {
    let chunkOffset = 0;
    return this.getPostsChunk({chunkOffset++, chunkSize}).pipe(
      expand(({total}) => total >= chunkOffset * chunkSize
                                ? getPostsChunk({chunkOffset++, chunkSize})
                                : empty()
      ),
      map(res => res.posts),
      // if you want the observable to emit 1 value everytime that
      // a chunk is fetched, use `scan` instead of `reduce`
      reduce((acc, val) => acc.concat(val), new Array<object>()),
    );
  }
  getPostsChunk({chunkOffset, chunkSize}: {chunkOffset?:number, chunkSize:number})
  {
     const offset = (chunkOffset || 0) * chunkSize;
     const limit = offset + chunkSize;
     const params = new HttpParams({offset, limit});
     return this.http.get<PostResponse>(this.baseUrl, {params});
  }
}

考虑到您可以"计算"从第一个请求后获得的 total 值中获取所有帖子条目所需的请求数,因此您可以绝对以不同的方式实现此要求,而无需使用expand操作员。

getData() {
    if (this.total < 50) {
        this.service().subscribe((response) => {
            this.total += response.length;
            this.getData()
        })
    }
}

最新更新