Question

我正在使用GitHub API检索存储库列表，然后遍历每个存储库，并发出另一个HTTP请求以检索最新的提交日期。如何在执行export class DashboardComponent implements OnInit { repos: Repo[]; loading = true; constructor(private API: APIService) { } ngOnInit() { this.getAllRepos(); } getAllRepos() { this.API.getRepos().subscribe(data => { this.repos = data; for (const repo of this.repos) { const commit_url = repo.branches_url.replace('{/branch}', `/${repo.default_branch}`); this.API.getCommits(commit_url).subscribe(commit => { repo.last_commit_date = commit.commit.commit.author.date; }); } }); // Finish looping over all repos before loading is false this.loading = false; } }之前执行循环以查找最新的提交日期，以便在页面上显示结果？

API.service.ts

{{1}}

dashboard.component.ts

{{1}}

Answer 1

在for之后插入this.loading = false;。不是在api调用之后

Answer 2

forkJoin是您的朋友在这里。它可以采用一个可观察值数组并将结果解析为一个数组。

  getAllRepos() {
    this.API.getRepos()
        .pipe(switchMap((repos) => {
             return forkJoin(repos.map(repo => {
                const commit_url = repo.branches_url.replace('{/branch}', `/${repo.default_branch}`);

                return this.API.getCommits(commit_url)
                    .pipe(map(commit => {
                        repo.last_commit_date = commit.commit.commit.author.date;
                        return repo;
                    });
             })
        })
        .subscribe(repos => {
            this.repos = repos;
            this.loading = false;
        });
}

那怎么了？

我们得到了仓库
我们使用switchMap获取结果并将其转换为另一个可观察的结果
我们使用forkJoin将存储库数组转换为可观察变量数组，并将其分解为单个可观察变量
我们使用map将最后一次提交添加到我们的repo对象中，并返回 new 回购对象。

作为旁注...

使用管道来转换数据。订阅应该是消费。转换的管道。

等待循环完成，然后再执行下一行

2 个答案: