开发GitHub Issues应用：如何通过Issue ID获取对应Issue的URL？

没问题，我来帮你梳理下怎么构造请求URL并发起axios调用，轻松拿到单个Issue的详情～

第一步：明确GitHub API的端点格式 #

GitHub的REST API提供了两种获取单个Issue的方式，取决于你路由里传的是哪种ID：

情况1：你传的是仓库内的Issue编号（number） #

这是最常用的场景（毕竟你的应用是展示特定仓库的Issue列表），对应的API端点是：

https://api.github.com/repos/{仓库所有者用户名}/{仓库名}/issues/{Issue编号}

比如，要获取octocat的Hello-World仓库里编号为1的Issue，URL就是：

https://api.github.com/repos/octocat/Hello-World/issues/1

情况2：你传的是GitHub全局唯一的Issue ID（id字段） #

如果你的路由参数是Issue的全局id（列表接口返回的issue对象里的id字段），对应的API端点更简单：

https://api.github.com/issues/{全局Issue ID}

第二步：结合路由参数构造URL并发起axios请求 #

假设你用的是React（Vue/Angular的逻辑类似），这里给你一个完整的示例：

import axios from 'axios';
import { useParams, useState, useEffect } from 'react-router-dom';

function IssueDetailPage() {
  // 从路由里拿到你传递的Issue ID（这里假设参数名是issueId）
  const { issueId } = useParams();
  const [issueDetail, setIssueDetail] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // 替换成你要展示的仓库的所有者和仓库名（可以从全局状态/环境变量取，不用硬编码）
  const REPO_OWNER = 'your-github-username';
  const REPO_NAME = 'your-target-repo';

  useEffect(() => {
    const fetchIssueDetail = async () => {
      try {
        // 构造URL：这里假设你传的是仓库内的Issue编号，用情况1的端点
        const requestUrl = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/issues/${issueId}`;
        
        // 如果是全局ID，就换成情况2的URL：
        // const requestUrl = `https://api.github.com/issues/${issueId}`;

        // 发起GET请求
        const response = await axios.get(requestUrl);
        setIssueDetail(response.data);
      } catch (err) {
        setError(`获取Issue详情失败：${err.message}`);
      } finally {
        setIsLoading(false);
      }
    };

    fetchIssueDetail();
  }, [issueId]);

  // 页面渲染逻辑...
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;
  return (
    <div className="issue-detail">
      <h1>{issueDetail.title}</h1>
      <p>编号：#{issueDetail.number}</p>
      <div dangerouslySetInnerHTML={{ __html: issueDetail.body }} />
    </div>
  );
}

export default IssueDetailPage;

几个重要的注意事项 #

• API速率限制：未认证的GitHub API请求每小时只能发60次，如果你需要更高的请求额度，建议添加认证头（用个人访问令牌）：

  const response = await axios.get(requestUrl, {
    headers: {
      Authorization: `token YOUR_GITHUB_PERSONAL_ACCESS_TOKEN`
    }
  });
  

• 区分id和number：别搞混哦！列表接口返回的Issue对象里，id是全局唯一的大数字，number是仓库内的Issue编号（就是你在GitHub上看到的#123里的123），后者更适合你的特定仓库场景。
• 错误处理：一定要处理请求失败的情况，比如网络问题、Issue不存在、权限不足等，给用户友好的提示。

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