调用GitHub组织仓库API时，fetch的response.json()返回空对象及Pending Promise问题

嘿，我帮你捋捋这个问题！你现在看到的Promise { <state>: "pending" }其实不是返回了空对象，而是因为你没正确处理response.json()返回的Promise——它本身是一个异步操作，不会直接给出解析好的数据。

问题根源 #

response.json()方法返回的是一个Promise，它需要时间去把响应体解析成JSON。你直接console.log它，只会打印出这个处于pending状态的Promise对象，而不是最终的仓库数据。

修复方案1：链式调用.then() #

你需要在response.json()后面再加一个.then()来接收解析后的JSON数据，同时别忘了检查请求是否成功：

const url = "https://api.github.com/orgs/octokit/repos";
fetch(url, { method: 'GET' })
  .then((response) => {
    // 先确认请求成功（HTTP状态码200-299）
    if (!response.ok) {
      throw new Error(`请求失败：状态码 ${response.status}`);
    }
    return response.json(); // 将Promise传递给下一个then
  })
  .then((repoList) => {
    console.log(repoList); // 这里就是你要的仓库列表啦！
  })
  .catch((err) => {
    console.log('出错了:', err);
  });

修复方案2：用async/await语法（更直观） #

如果你觉得链式then有点绕，async/await写法会更清晰：

async function fetchOrgRepos() {
  const url = "https://api.github.com/orgs/octokit/repos";
  try {
    const response = await fetch(url, { method: 'GET' });
    if (!response.ok) {
      throw new Error(`请求失败：状态码 ${response.status}`);
    }
    const repoList = await response.json(); // 等待Promise解析完成
    console.log(repoList);
  } catch (err) {
    console.log('出错了:', err);
  }
}

// 调用函数
fetchOrgRepos();

额外注意事项 #

• 一定要检查response.ok：如果请求返回404（组织不存在）或者403（API限流），不检查的话后续解析可能会报错，或者得到不符合预期的数据。
• GitHub API有请求频率限制：如果频繁调用可能会触发限流，这时候响应状态码会是403，记得在catch里处理这种情况。

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