调用BuiltWith API时Fetch返回Response对象而非JSON数据的问题

你遇到的问题核心是没有正确等待Response.json()的Promise完成，同时return语句的写法也存在错误，导致你看到的是未解析的Response对象，而不是期望的JSON数据。

具体错误点： #

• 直接打印Response对象：你在console.log(domainRes)和console.log(keywordRes)时，打印的是Fetch返回的原始Response实例，而非解析后的JSON内容——要获取JSON数据，必须调用.json()并等待这个异步操作完成。
• return语句的语法错误：await {'domRes': domainRes.json(), 'kwRes': keywordRes.json()}是无效写法，await只能作用于Promise，不能直接作用于普通对象。而且domainRes.json()和keywordRes.json()本身都是异步Promise，你需要等待这两个Promise都完成后再返回结果。

修正后的代码： #

async function BuiltWithCall(website) {
  // 第一个API调用并解析JSON
  const domainCall = `https://api.builtwith.com/v12/api.json?KEY=${keys.builtWith}&LOOKUP=${website}`;
  const domainRes = await fetch(domainCall);
  const domainData = await domainRes.json();
  console.log(domainData); // 现在打印的是解析后的JSON内容

  // 第二个API调用并解析JSON
  const keywordCall = `https://api.builtwith.com/kw1/api.json?KEY=${keys.builtWith}&LOOKUP=${website}`;
  const keywordRes = await fetch(keywordCall);
  const keywordData = await keywordRes.json();
  console.log(keywordData); // 现在打印的是解析后的JSON内容

  // 返回解析完成的结果
  return { domRes: domainData, kwRes: keywordData };
}

性能优化建议（并行调用API）： #

如果两个API调用之间没有依赖关系，你可以用Promise.all同时发起请求，减少总等待时间：

async function BuiltWithCall(website) {
  const domainCall = `https://api.builtwith.com/v12/api.json?KEY=${keys.builtWith}&LOOKUP=${website}`;
  const keywordCall = `https://api.builtwith.com/kw1/api.json?KEY=${keys.builtWith}&LOOKUP=${website}`;

  // 并行发起请求并等待所有JSON解析完成
  const [domainData, keywordData] = await Promise.all([
    fetch(domainCall).then(res => res.json()),
    fetch(keywordCall).then(res => res.json())
  ]);

  console.log(domainData, keywordData);
  return { domRes: domainData, kwRes: keywordData };
}

为什么PageSpeedCall能正常工作？ #

因为在PageSpeedCall里，你正确执行了await results.json()，等待了JSON解析的Promise完成，所以返回的是解析后的JSON数据；而BuiltWithCall里缺少了这关键的一步，导致你操作的是原始Response对象。

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