如何修改Fetch API代码携带X-Api-Key调用接口并解析指定字段

核心修改点 #

Fetch API允许通过第二个配置参数设置请求头、请求方法等信息，同时需要根据新接口的返回结构调整数据解析逻辑：

• 添加请求头配置：对应curl中的-H参数，在fetch的第二个参数里定义headers对象，包含accept和X-Api-Key
• 调整数据解析路径：根据新接口返回的JSON结构，定位到visits.nonOrphanVisits.total字段

修改后的完整代码 #

function getElement(id) {
  return document.getElementById(id);
}

// 替换为你的实际API密钥
const API_KEY = "你的APIKEY";

fetch('https://api-url.tld', {
  method: 'GET', // GET请求可省略，此处显式对应curl的-X 'GET'
  headers: {
    'accept': 'application/json',
    'X-Api-Key': API_KEY
  }
})
.then(res => {
  // 可选：添加响应状态校验，避免解析错误响应
  if (!res.ok) {
    throw new Error(`请求失败：${res.status}`);
  }
  return res.json();
})
.then(json => {
  // 按新接口的JSON结构获取目标字段值
  const totalVisits = json["visits"]["nonOrphanVisits"]["total"];
  getElement('total_clicks').innerText = totalVisits;
})
.catch(err => {
  // 可选：添加错误捕获逻辑
  console.error('数据获取失败：', err);
});

关键说明 #

• 请求头配置：headers对象的键值对完全对应curl命令中的-H参数，确保API能识别身份验证和响应格式要求
• JSON解析：新接口返回结构为{ visits: { nonOrphanVisits: { total: ... } } }，需逐层访问对应属性
• 错误处理：新增的res.ok检查和catch块可在请求失败时捕获异常，避免页面无响应

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