完成for循环后如何完成订阅者？

Question

如果您GET向https://api.github.com/users/benawad/repos发出请求，您将获得用户benawad拥有的所有存储库。至少这是 API 端点预期返回的内容。问题是 GitHub 将存储库的数量限制为 30。

截至今天（14/08/2021），用户benawad拥有246 个存储库。

为了克服上面提到的问题，你应该发出一个 GET 请求，但有一些额外的参数...... GitHub 已经实现了它的 API 的分页。因此，在 URL 中，您应该指定要检索的页面和每页的存储库数量。

我们的新GET请求应该是这样的：

https://api.github.com/users/benawad/repos?page=1&per_page=1000

问题在于，GitHub 将每页的存储库数量限制为 100。因此我们的GET请求返回 100 个存储库，而不是用户当前benawad拥有的 246 个。

在我的 Angular 服务中，我实现了以下代码以从所有页面检索所有存储库。

  public getUserRepos(user: string): Observable<RepositoryI[]> {
    return new Observable((subscriber: Subscriber<RepositoryI[]>) => {
      this.getUserData(user).subscribe((data: UserI) => {
        //public_repos is the amt of repos the user has
        const pages: number = Math.ceil(data.public_repos / 100);

        for (let i = 1; i <= pages; i++) {
          this.http
            .get(
              `https://api.github.com/users/${user}/repos?page=${i}&per_page=100`
            )
            .subscribe((data: RepositoryI[]) => {
              subscriber.next(data);
            });
        }
      });
    });
  }

在我的组件中，我订阅了以下内容：

  this.userService.getUserRepos(id).subscribe((repos)=>{
    this.repositories.push(...repos);
  })

这种方法的问题是我无法控制 Observable 何时停止发出值。在我的组件中，我想在 Observable完成时触发一个函数。

我尝试了以下方法：

  public getUserRepos(user: string): Observable<RepositoryI[]> {
    return new Observable((subscriber: Subscriber<RepositoryI[]>) => {
      this.getUserData(user).subscribe((data: UserI) => {
        const pages: number = Math.ceil(data.public_repos / 100);

        for (let i = 1; i <= pages; i++) {
          this.http
            .get(
              `https://api.github.com/users/${user}/repos?page=${i}&per_page=100`
            )
            .subscribe((data: RepositoryI[]) => {
              subscriber.next(data);
              // If the for loop is complete -> complete the subscriber
              if(pages == i) subscriber.complete();
            });
        }
      });
    });
  }

在我的组件中，我执行以下操作：

  this.userService.getUserRepos(id).subscribe(
    (repos) => {
      this.repositories.push(...repos);
    },
    (err) => {
      console.log(err);
    },
    () => {
      // When the observable is complete:
      
      console.log(this.repositories); // This only logs 46 repositores, it should log 246
      // I want to trigger some function here
    }
  );

该console.log()只记录46个repositores。为什么会这样？也许我在获取所有 3 个页面之前完成了订阅者；但我正在调用.complete()订阅内部。我究竟做错了什么？提前致谢。

Answer 1

您可以使用 RxJS 运算符和函数通过一次订阅来实现这一目标，如下所示：

public getUserRepos(user: string): Observable<RepositoryI[]> {
  // will return one observable that contains all the repos after concating them to each other:
  return this.getUserData(user).pipe(
    switchMap((data: UserI) => {
      //public_repos is the amt of repos the user has
      const pages: number = Math.ceil(data.public_repos / 100);

      // forkJoin will emit the result as (RepositoryI[][]) once all the sub-observables are completed:
      return forkJoin(
        Array.from(new Array(pages)).map((_, page) =>
          this.http.get<RepositoryI[]>(
            `https://api.github.com/users/${user}/repos?page=${page + 1}&per_page=100`
          )
        )
      ).pipe(
        // will reduce the RepositoryI[][] to be RepositoryI[] after concating them to each other:
        map((res) =>
          res.reduce((acc, value) => {
            return acc.concat(value);
          }, [])
        )
      );
    })
  );
}

然后在您的组件中，您可以订阅可观察的对象，该可观察对象将在获取所有存储库后返回所有存储库：

  this.userService.getUserRepos(id).subscribe((repos) => {
    this.repositories = repos;
    // You can trigger the function that you need here...
  });