Angular项目中如何通过GitHub API获取Google全部公开仓库？

完全可以，而且这才是更符合实际需求的方案——手动录入数据不仅繁琐，还没法保证数据的实时性和完整性。下面是具体的实现步骤：

1. 移除或停用内存模拟服务 #

既然要调用真实的GitHub API，angular-in-memory-web-api就不需要了。你可以直接删除InMemoryDataService，并在AppModule中移除对应的HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService)配置。如果想保留开发时的模拟/真实API切换能力，可以通过环境变量控制启用逻辑，但核心业务逻辑要换成真实HTTP请求。

2. 创建仓库数据服务（RepoService） #

用Angular的HttpClient封装GitHub API的调用，重点处理分页逻辑（GitHub API默认一页返回30条数据，Google的公开仓库远不止这个数量）：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';

export interface Repo {
  id: number;
  name: string;
  // 可根据需求添加其他字段，比如description、html_url等
}

@Injectable({ providedIn: 'root' })
export class RepoService {
  private baseUrl = 'https://api.github.com/users/google/repos';

  constructor(private http: HttpClient) {}

  // 获取所有Google公开仓库
  getAllGoogleRepos(): Observable<Repo[]> {
    // 每页请求100条（GitHub API允许的最大值），减少请求次数
    const perPage = 100;
    return this.http.get<Repo[]>(`${this.baseUrl}?page=1&per_page=${perPage}`).pipe(
      mergeMap((firstPageRepos, _, response) => {
        const linkHeader = response.headers.get('Link');
        // 如果没有Link头，说明只有一页数据
        if (!linkHeader) {
          return [firstPageRepos];
        }

        // 从Link头解析最后一页的页码
        const lastPageMatch = linkHeader.match(/page=(\d+)>; rel="last"/);
        if (!lastPageMatch) {
          return [firstPageRepos];
        }
        const totalPages = parseInt(lastPageMatch[1], 10);

        // 生成后续所有页面的请求数组
        const pageRequests: Observable<Repo[]>[] = [];
        for (let page = 2; page <= totalPages; page++) {
          pageRequests.push(
            this.http.get<Repo[]>(`${this.baseUrl}?page=${page}&per_page=${perPage}`)
          );
        }

        // 合并所有页面的结果并扁平化数组
        return forkJoin([firstPageRepos, ...pageRequests]).pipe(
          map(allPages => allPages.flat())
        );
      })
    );
  }
}

3. 在组件中调用服务获取数据 #

比如在仓库列表组件中：

import { Component, OnInit } from '@angular/core';
import { RepoService, Repo } from './repo.service';

@Component({
  selector: 'app-repo-list',
  template: `
    <div *ngIf="loading">加载中...</div>
    <ul *ngIf="!loading">
      <li *ngFor="let repo of repos">{{ repo.id }} - {{ repo.name }}</li>
    </ul>
    <div *ngIf="errorMsg">{{ errorMsg }}</div>
  `
})
export class RepoListComponent implements OnInit {
  repos: Repo[] = [];
  loading = false;
  errorMsg = '';

  constructor(private repoService: RepoService) {}

  ngOnInit(): void {
    this.loading = true;
    this.repoService.getAllGoogleRepos().subscribe({
      next: repos => {
        this.repos = repos;
        this.loading = false;
      },
      error: err => {
        this.errorMsg = '获取仓库数据失败，请稍后重试';
        this.loading = false;
        console.error('请求错误:', err);
      }
    });
  }
}

4. 关键注意事项 #

• API请求限制：未认证的GitHub API请求每小时最多60次，开发时频繁测试容易触发限制。可以在请求头中添加个人访问令牌（无需特殊权限），将限额提升至每小时5000次：

  // 在RepoService的请求中添加headers
  const headers = new HttpHeaders({
    'Authorization': 'token 你的个人访问令牌'
  });
  // 然后在get请求中传入{ headers }参数
  

• 数据缓存：可以添加localStorage缓存逻辑，避免重复请求相同数据，提升页面加载速度。
• 性能优化：如果仓库数量过大，可以考虑实现懒加载/分页展示，避免一次性加载所有数据导致页面卡顿。

内容的提问来源于stack exchange，提问作者lei