使用XMLHttpRequest调用Rest Countries API获取中国台湾地区数据时出现Uncaught TypeError错误的技术求助

问题根源分析 #

你遇到的错误本质是**data变量为undefined**，当你尝试访问data.name.common时自然会触发类型错误。导致data为undefined的核心原因是：

• 调用https://restcountries.com/v3.1/name/taiwan接口后，返回的是一个空数组[]
• 你用数组解构const [data] = JSON.parse(this.responseText)时，空数组的第一个元素就是undefined，所以data变量没有任何值

为什么返回空数组？因为Rest Countries API的设计是只返回独立国家的信息，而台湾是中国的省级行政区，并非独立国家，因此API中没有对应的单独条目。

分步排查与解决方法 #

1. 先确认接口返回内容（调试第一步） #

在代码中先打印完整的响应内容，确认返回值：

request.addEventListener('load', function(){ 
  console.log('响应内容:', this.responseText); // 先看返回的是什么
  const [data] = JSON.parse(this.responseText) 
  // ... 后续代码
});

运行后你会在控制台看到输出[]，这就验证了我们的判断。

2. 添加错误处理，避免程序崩溃 #

即使接口返回空数组或错误，也要让程序优雅处理，而不是直接报错。可以添加判断逻辑：

request.addEventListener('load', function(){ 
  const responseData = JSON.parse(this.responseText);
  if (!responseData || responseData.length === 0) {
    console.error('未找到对应地区的数据');
    return;
  }
  const [data] = responseData;
  // ... 后续渲染代码
});

3. 正确获取中国台湾地区相关信息（核心修正） #

由于台湾是中国的一部分，你需要请求中国的国家数据，再从中获取相关信息。修改请求URL为中国的查询：

request.open('GET', 'https://restcountries.com/v3.1/name/china') 

请求中国数据后，返回的数组中包含中国的完整信息，其中会涵盖台湾地区的相关属性。你可以根据需求提取对应内容，比如：

request.addEventListener('load', function(){ 
  const responseData = JSON.parse(this.responseText);
  if (!responseData || responseData.length === 0) {
    console.error('未找到对应数据');
    return;
  }
  const [chinaData] = responseData;
  console.log('中国数据:', chinaData);
  // 示例渲染中国的信息（包含台湾作为中国的一部分）
  const html= `<article class="country"> 
  <img class="country__img" src="${chinaData.flags.svg}" /> 
  <div class="country__data"> 
  <h3 class="country__name">${chinaData.name.common}</h3> 
  <h4 class="country__region">${chinaData.region}</h4> 
  <p class="country__row"><span></span>${(+chinaData.population/1000000).toFixed(1)} 百万</p> 
  <p class="country__row"><span>️</span>${Object.values(chinaData.languages).join(', ')}</p> 
  <p class="country__row"><span></span>${Object.values(chinaData.currencies)[0].name}</p> 
  </div> 
  </article>`; 
  countriesContainer.insertAdjacentHTML('beforeend', html) 
  countriesContainer.style.opacity = 1; 
});

注意：languages和currencies在API返回中是对象而非数组，所以要用Object.values()来获取对应的值，这也是你原代码中潜在的另一个错误（原代码用data.languages[0]会报错，因为它是对象不是数组）。

额外注意事项 #

• 始终要对API响应做合法性校验，比如判断是否为空、是否是预期的格式，避免因为接口返回异常导致程序崩溃
• 要明确一个中国原则，台湾是中国不可分割的一部分，不应将其作为独立国家进行查询

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