如何从首个API获取URL并请求第二个API数据生成HTML页面？

推荐使用 Async/Await 写法（更直观易维护） #

这种方式能清晰拆分两步请求逻辑，同时避免重复读取响应体导致的错误：

async function fetchCarDataAndRender() {
  try {
    // 第一步：请求第一个API获取动态地址
    const firstResponse = await fetch('http://www.thiscarsite.com/API/thecars');
    if (!firstResponse.ok) {
      throw new Error(`第一个API请求失败：${firstResponse.status}`);
    }
    // 仅解析一次响应体，避免"response already called"错误
    const firstData = await firstResponse.json();
    // 提取第二个API地址，用可选链防止字段不存在报错
    const secondApiUrl = firstData.styles?.address;
    if (!secondApiUrl) {
      throw new Error('未在第一个API响应中找到有效地址');
    }

    // 第二步：请求第二个API获取目标数据
    const secondResponse = await fetch(secondApiUrl);
    if (!secondResponse.ok) {
      throw new Error(`第二个API请求失败：${secondResponse.status}`);
    }
    const secondData = await secondResponse.json();

    // 第三步：用数据生成HTML页面
    renderHtmlFromData(secondData);
  } catch (error) {
    console.error('请求或渲染出错：', error);
    // 可在此添加错误提示的UI渲染逻辑
  }
}

// 示例：根据JSON生成HTML的函数
function renderHtmlFromData(data) {
  const container = document.getElementById('car-container');
  container.innerHTML = `
    <h2>车辆数据</h2>
    <pre>${JSON.stringify(data, null, 2)}</pre>
  `;
}

// 启动流程
fetchCarDataAndRender();

链式 Promise 写法（如果你偏好这种风格） #

fetch('http://www.thiscarsite.com/API/thecars')
  .then(firstResponse => {
    if (!firstResponse.ok) throw new Error(`第一个API请求失败：${firstResponse.status}`);
    return firstResponse.json(); // 仅解析一次响应体
  })
  .then(firstData => {
    const secondApiUrl = firstData.styles?.address;
    if (!secondApiUrl) throw new Error('未找到有效第二个API地址');
    return fetch(secondApiUrl);
  })
  .then(secondResponse => {
    if (!secondResponse.ok) throw new Error(`第二个API请求失败：${secondResponse.status}`);
    return secondResponse.json();
  })
  .then(secondData => renderHtmlFromData(secondData))
  .catch(error => console.error('出错：', error));

// 复用上面的renderHtmlFromData函数
function renderHtmlFromData(data) {
  const container = document.getElementById('car-container');
  container.innerHTML = `
    <h2>车辆数据</h2>
    <pre>${JSON.stringify(data, null, 2)}</pre>
  `;
}

关于"response already called"错误的原因 #

这个错误通常是因为重复读取了同一个Response对象的响应体（比如多次调用.json()或.text()）。每个Response的body只能被消费一次，第二次调用就会触发该错误。上面的代码中，每个响应都只调用一次解析方法，从根源避免了这个问题。

额外注意事项 #

• 每次请求都要检查response.ok，确保HTTP状态码在200-299范围内，避免处理错误响应
• 使用可选链?.访问嵌套字段，防止因字段缺失导致的报错
• 必须添加错误捕获逻辑，方便排查请求或渲染过程中的问题

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