Angular - 正确使用 RXJS 扩展运算符进行递归 http 调用 [英] Angular - Correctly using RXJS expand operator to make recursive http calls

问题描述

我正在尝试使用上一次调用中的值对 Reddit 的 API 进行递归 http 调用.问题是上一个调用在下一个调用开始之前没有完成，所以会进行重复调用.每次调用都应更新after"值，直到after"值未定义.我发现了这个 相关帖子 并尝试使用所描述的解决方案，但我不知道如何确保在进行下一次通话之前完成上一次通话.以下是我的实际代码:

I am attempting to make recursive http calls to Reddit's API using a value from the previous call. The problem is that the previous call is not finished before the next one starts, so duplicate calls are being made. The "after" value should be updated for every call until the "after" value is undefined. I found this related post and have attempted to use the solution described, but I can't figure out how to make sure the previous call is finished before making the next call. Below is my actual code:

private getSavedPostsForAuthenticatedUser(username: string, after: string, userPosts: any) {
    const headers = new Headers();
    if (!userPosts) {
        userPosts = [];
    }
    headers.append('Authorization', `Bearer ${this._token}`);
    const redditUrl = `${RetainerConfig.redditOauthUrl}user/${username}/saved`;
    const url = after ? `${redditUrl}/?after=${after}` : redditUrl;
    return this._http.get(url, { headers: headers })
        .map(response => response.json())
        .expand(response => {
            if (response.data) {
                for (const post of response.data.children) {
                    userPosts.push(post);
                }
                if (response.data.after) {
                    return this.getSavedPostsForAuthenticatedUser(username, response.data.after, userPosts);
                }
            }
            return Observable.of(userPosts);
        });

推荐答案

返回相同的函数 getSavedPostsForAuthenticatedUser 将导致递归扩展.要解决这个问题，您需要将 http observable 分开.

Returning the same function getSavedPostsForAuthenticatedUser will cause recursive expands. To solve this you need to separate the http observable.

  private getSavedPostsForAuthenticatedUser(username: string, after: string, userPosts: any) {
    const request$ = this._getRequest(username, after, userPosts);
    if (!userPosts) {
      userPosts = [];
    }
    return request$
      .expand(response => {
        if (response.data) {
          for (const post of response.data.children) {
            userPosts.push(post);
          }
          if (response.data.after) {
            return this._getRequest(username, response.data.after, userPosts);
          }
        }
        return Observable.of(userPosts);
      });
  }

  private _getRequest(username: string, after: string) {
    const headers = new Headers();
    headers.append('Authorization', `Bearer ${this._token}`);
    const redditUrl = `${RetainerConfig.redditOauthUrl}user/${username}/saved`;
    const url = after ? `${redditUrl}/?after=${after}` : redditUrl;

    return this._http.get(url, {headers: headers})
      .map(response => response.json());
  }

要停止扩展，您可以使用 Observable.empty().请参阅此帖子.

To stop the expanding you may use Observable.empty(). Please refer to this post.

这篇关于Angular - 正确使用 RXJS 扩展运算符进行递归 http 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！