新手求助：用JavaScript获取Django REST数据的代码排错

嘿，作为刚接触JS的新手，你已经迈出了很棒的第一步！咱们来一步步排查你的代码问题：

最核心的错误：错误获取响应数据 #

你的Django接口返回的直接是一个数组：[{"id":1,"content":"Hello Tweet"}]，但你在代码里写了：

const listedItems = serverResponse.response

这是不对的！因为你已经设置了xhr.responseType = 'json'，XHR会自动把服务器返回的JSON数据解析成对应的JS对象/数组，所以xhr.response（也就是你的serverResponse）本身就是那个数组，根本没有response这个属性。这会导致listedItems变成undefined，后面的循环自然不会执行。

你应该直接把serverResponse赋值给listedItems：

const listedItems = serverResponse;
// 或者直接用xhr.response
const listedItems = xhr.response;

额外的优化建议 #

1. 添加错误处理：网络请求可能会失败，或者接口返回非200的状态码，建议在代码里加上状态检查和错误监听：

xhr.onload = function(){
  // 先检查请求是否成功
  if (xhr.status >= 200 && xhr.status < 300) {
    const listedItems = xhr.response;
    // 后面的渲染逻辑...
  } else {
    console.error('请求失败，状态码：', xhr.status);
    tweetsElement.innerHTML = '<p>加载推文失败，请稍后重试</p>';
  }
};
// 监听网络错误
xhr.onerror = function() {
  console.error('网络连接错误');
  tweetsElement.innerHTML = '<p>网络连接失败，请检查网络</p>';
};

2. 确保DOM元素存在：要保证页面上确实有一个id为tweets的元素，比如：

<div id="tweets"></div>

不然document.getElementById('tweets')会返回null，设置innerHTML的时候会报错。

修正后的完整代码 #

const tweetsElement = document.getElementById('tweets');
// 先检查元素是否存在，避免报错
if (!tweetsElement) {
  console.error('找不到id为tweets的元素');
} else {
  const xhr = new XMLHttpRequest();
  const method = 'GET';
  const url = '/tweets';
  xhr.responseType = 'json';
  xhr.open(method, url);
  
  xhr.onload = function(){
    if (xhr.status >= 200 && xhr.status < 300) {
      const listedItems = xhr.response;
      let finalTweetStr = "";
      for(let i=0; i<listedItems.length; i++){
        console.log(i, listedItems[i]);
        const currentItem = `<div class='mb-4'><h1>${listedItems[i].id}</h1><p>${listedItems[i].content}</p></div>`;
        finalTweetStr += currentItem;
      }
      tweetsElement.innerHTML = finalTweetStr;
    } else {
      console.error('请求失败，状态码：', xhr.status);
      tweetsElement.innerHTML = '<p>加载推文失败，请稍后重试</p>';
    }
  };
  
  xhr.onerror = function() {
    console.error('网络连接错误');
    tweetsElement.innerHTML = '<p>网络连接失败，请检查网络</p>';
  };
  
  xhr.send();
}

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