如何在Angular应用中通过Git V3 API读取Git仓库的JSON文件？

看起来你已经通过GitHub V3 API拿到了目标JSON文件的元数据，但这只是文件的基本信息，还没拿到实际的内容。别担心，我来一步步教你怎么在Angular里完成从获取内容到解析成数据对象的流程：

1. 理解API返回的元数据 #

你当前拿到的响应里，url字段是关键——这个是获取文件实际内容的API端点。调用这个接口后，GitHub会返回包含content字段的响应，而这个content是经过Base64编码的JSON字符串，我们需要解码后才能解析。

2. 在Angular中实现请求与解析 #

首先确保你的Angular项目已经导入了HttpClientModule（在app.module.ts里），然后可以创建一个服务来封装这个逻辑：

步骤1：创建数据服务 #

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

@Injectable({
  providedIn: 'root'
})
export class GithubJsonService {
  // 如果是私有仓库，需要添加授权token
  private authToken = '你的GitHub访问令牌';

  constructor(private http: HttpClient) { }

  getJsonFile(fileMetadataUrl: string) {
    const headers = new HttpHeaders({
      // 私有仓库必须添加这个头，公开仓库可以省略
      'Authorization': `Bearer ${this.authToken}`
    });

    return this.http.get(fileMetadataUrl, { headers }).pipe(
      map((response: any) => {
        // 解码Base64内容
        const decodedContent = atob(response.content);
        // 解析为JSON对象
        return JSON.parse(decodedContent);
      })
    );
  }
}

步骤2：在组件中调用服务 #

import { Component, OnInit } from '@angular/core';
import { GithubJsonService } from './github-json.service';

@Component({
  selector: 'app-json-loader',
  templateUrl: './json-loader.component.html',
  styleUrls: ['./json-loader.component.css']
})
export class JsonLoaderComponent implements OnInit {
  jsonData: any;

  constructor(private githubJsonService: GithubJsonService) { }

  ngOnInit(): void {
    // 这里用你之前拿到的元数据里的url
    const fileUrl = 'https://github.foo.com/api/v3/repos/MyOrigin/the-repo/contents/path/to/file.json?ref=master';
    
    this.githubJsonService.getJsonFile(fileUrl).subscribe({
      next: (data) => {
        this.jsonData = data;
        console.log('解析后的JSON数据:', this.jsonData);
      },
      error: (err) => {
        console.error('获取文件失败:', err);
      }
    });
  }
}

3. 注意事项 #

• 公开/私有仓库区别：如果是公开仓库，可以去掉Authorization请求头；私有仓库必须使用个人访问令牌（PAT），令牌需要有repo权限。
• Base64解码：GitHub API返回的content会包含换行符，atob方法可以自动处理这些换行，不用担心。
• 错误处理：记得在订阅时处理错误情况，比如网络问题、权限不足等。

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