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

Question

I am using the GitHub API to retrieve a list of repos and afterwards looping over each repo and making another HTTP request to retrieve the latest commit date. How can I have it execute the loop to find the latest commit date before making loading = false so I can show the results on the page?

API.service.ts

export class APIService {

  constructor(private http: HttpClient) { }

  getRepos(): Observable<any[]> 
    return this.http.get<any[]>('https://api.github.com/users/githubtraining/repos')
      .pipe(catchError(this.handleError));
  }

  getCommits(url: string): Observable<any> {
    return this.http.get<any>(url)
      .pipe(catchError(this.handleError));
  }

  handleError(error: any) {
    return throwError(error);
  }

}

dashboard.component.ts

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;
  }
}

Answer 1

Insert this.loading = false; after the for. Not after the api call

Answer 2

forkJoin is your friend here. it can take an array of observables and resolve the results into an array.

  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;
        });
}

So whats happening?

1. We get the repos
2. We use switchMap to take the result and transform it into another observable
3. We use forkJoin to turn the array of repos, into an array of observables that resolve into a single observable
4. We use map to add the last commit to our repo object and return the new repo object.

As a sidenote...

Use pipes to transform your data. Subscriptions should be for consumption . Pipes for transformation .