如何在原生JavaScript中累加多个AJAX请求的数据？

嘿，我看到你想把多个AJAX请求返回的数据收集起来，累加后再统一展示到指定的div里，当前的代码确实存在几个影响实现需求的小问题，我来帮你梳理并给出修复方案～

原代码的核心问题 #

• 复用单个XMLHttpRequest实例：你在循环中一直使用同一个xmlhttp变量，每次迭代都会覆盖之前的请求对象，这会导致前面的请求被中断，最终大概率只有最后一个请求能正常返回数据。
• 实时插入而非统一展示：当前逻辑是每个请求返回后立刻插入内容，没法实现“先累加所有数据，再一次性展示”的需求。

方案1：使用现代的Fetch API + Promise.all（推荐） #

Fetch是更现代的网络请求API，搭配Promise.all可以很方便地等待所有请求完成，统一收集数据后再展示：

// residents是包含请求URL的数组
async function doResidentsRequest(residents) {
  try {
    // 并行发起所有请求，等待全部完成后获取所有数据
    const residentDataList = await Promise.all(
      residents.map(url => fetch(url).then(response => response.json()))
    );
    
    // 所有数据收集完成后，统一调用展示函数
    displayResidents(residentDataList);
  } catch (error) {
    console.error('请求出错:', error);
  }
}

function displayResidents(residentsDataList) {
  const modalContent = document.getElementById("modal-content");
  // 可选：清空原有内容，避免重复展示
  modalContent.innerHTML = '';
  
  // 按需求拼接数据，这里以每个名字换行展示为例
  const content = residentsDataList
    .map(data => `<p>${data.name}</p>`)
    .join('');
  
  modalContent.insertAdjacentHTML('beforeend', content);
}

说明 #

• Promise.all会等待传入的所有Promise都成功resolve，才会返回包含所有请求结果的数组；如果有任意一个请求失败，会直接进入catch块，你可以根据需求添加错误处理逻辑。
• 展示部分可以灵活调整格式，比如用逗号分隔名字、添加样式类等，完全根据你的页面需求来。

方案2：修改原有XMLHttpRequest逻辑（兼容旧环境） #

如果需要兼容不支持Fetch的旧环境，可以修改原有的XMLHttpRequest代码，核心是每次循环创建新的请求实例，并收集所有数据后统一展示：

function doResidentsRequest(residents) {
  const allResidentData = [];
  let completedCount = 0;
  const totalRequests = residents.length;

  for(let i = 0; i < totalRequests; i++) {
    // 每次循环创建新的XMLHttpRequest实例，避免覆盖之前的请求
    const xmlhttp = new XMLHttpRequest();
    
    xmlhttp.onreadystatechange = function () {
      if (this.readyState === 4) {
        if (this.status === 200) {
          const residentData = JSON.parse(this.responseText);
          allResidentData.push(residentData);
          completedCount++;
          
          // 当所有请求都完成时，统一展示数据
          if (completedCount === totalRequests) {
            displayResidents(allResidentData);
          }
        } else {
          console.error(`请求${residents[i]}失败，状态码: ${this.status}`);
          completedCount++;
          // 即使有请求失败，也可以根据需求决定是否继续等待其他请求，或者直接处理错误
          if (completedCount === totalRequests) {
            displayResidents(allResidentData);
          }
        }
      }
    };
    
    xmlhttp.open("GET", residents[i], true);
    xmlhttp.send();
  }
}

function displayResidents(residentsDataList) {
  const modalContent = document.getElementById("modal-content");
  modalContent.innerHTML = '';
  
  // 这里以拼接所有名字为字符串为例，你可以调整成任意格式
  const names = residentsDataList.map(data => data.name).join(', ');
  modalContent.insertAdjacentHTML('beforeend', names);
}

说明 #

• 每次循环创建新的XMLHttpRequest实例，确保每个请求独立不被覆盖。
• 用计数器completedCount跟踪已完成的请求数量，当数量等于总请求数时，说明所有数据都收集完成，此时调用展示函数。
• 添加了错误处理逻辑，即使某个请求失败，也不会阻塞其他请求的完成和最终展示。

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