AJAX请求次数过多的四种解决方案

/**
 * 串行执行ajax请求
 * @param {array} urls - 请求地址列表（如['/api/user/1', '/api/user/2', ..., '/api/user/100']）
 * @returns {promise<array>} 所有请求结果的数组（顺序与urls一致）
 */
async function serialrequest(urls) {
  const results = []; // 存储最终结果
  const maxretry = 2; // 失败重试次数，提升稳定性
  
  for (let i = 0; i < urls.length; i++) {
    const url = urls[i];
    let retrycount = 0;
    let success = false;
    
    // 失败重试逻辑
    while (retrycount <= maxretry && !success) {
      try {
        const response = await fetch(url, {
          method: 'get',
          headers: { 'content-type': 'application/json' },
          signal: abortsignal.timeout(5000) // 5秒超时，避免无限等待
        });
        
        if (!response.ok) {
          throw new error(`http错误，状态码：${response.status}`);
        }
        
        const data = await response.json();
        results.push(data);
        success = true;
        console.log(`第${i+1}个请求成功，进度：${i+1}/${urls.length}`);
      } catch (error) {
        retrycount++;
        if (retrycount > maxretry) {
          results.push(null); // 标记失败的请求
          console.error(`第${i+1}个请求失败（重试${maxretry}次）：`, error.message);
        } else {
          console.log(`第${i+1}个请求失败，正在重试（${retrycount}/${maxretry}）`);
          await new promise(resolve => settimeout(resolve, 1000)); // 重试间隔1秒
        }
      }
    }
  }
  
  return results;
}

// 用法示例
const urllist = array.from({ length: 100 }, (_, i) => `/api/user/${i+1}`);
serialrequest(urllist).then(allresults => {
  const successcount = allresults.filter(boolean).length;
  console.log(`所有请求完成，成功${successcount}个，失败${100 - successcount}个`);
  // 后续处理结果...
});

/**
 * 带并发控制的并行请求
 * @param {array} urls - 请求地址列表
 * @param {number} limit - 最大并发数（推荐3-5，根据服务器性能调整）
 * @returns {promise<array>} 所有请求结果的数组
 */
async function concurrentrequest(urls, limit = 5) {
  const results = []; // 存储最终结果
  const executing = new set(); // 并发池：存储正在执行的promise
  const urlqueue = [...urls]; // 请求队列
  
  // 单个请求的封装函数
  const request = async (url, index) => {
    try {
      const response = await fetch(url, {
        method: 'get',
        headers: { 'content-type': 'application/json' },
        signal: abortsignal.timeout(5000)
      });
      
      if (!response.ok) {
        throw new error(`http错误，状态码：${response.status}`);
      }
      
      const data = await response.json();
      results[index] = data; // 按原顺序存储结果
      console.log(`请求${url}成功`);
    } catch (error) {
      results[index] = null;
      console.error(`请求${url}失败：`, error.message);
    } finally {
      executing.delete(url); // 请求完成后移出并发池
      // 队列中有剩余请求时，补充到并发池
      if (urlqueue.length > 0) {
        const nexturl = urlqueue.shift();
        const nextindex = urls.indexof(nexturl);
        executing.add(request(nexturl, nextindex));
      }
    }
  };
  
  // 初始化并发池
  for (let i = 0; i < math.min(limit, urls.length); i++) {
    const url = urlqueue.shift();
    executing.add(request(url, i));
  }
  
  // 等待所有请求完成
  await promise.all(executing);
  return results;
}

// 用法示例
const urllist = array.from({ length: 100 }, (_, i) => `/api/user/${i+1}`);
concurrentrequest(urllist, 5).then(allresults => {
  // 处理结果...
});

// 分页核心状态
const pagination = {
  pagenum: 1, // 当前页码
  pagesize: 10, // 每页条数
  total: 100, // 总数据量（可从接口返回）
  totalpages: 10 // 总页数
};

// 渲染分页数据
function rendertable(data) {
  const tablebody = document.getelementbyid('table-body');
  tablebody.innerhtml = data.map(item => `
    <tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.phone}</td>
    </tr>
  `).join('');
}

// 加载指定页数据
async function loadpagedata(pagenum) {
  try {
    const response = await fetch(`/api/users?pagenum=${pagenum}&pagesize=${pagination.pagesize}`, {
      method: 'get',
      headers: { 'content-type': 'application/json' }
    });
    
    if (!response.ok) {
      throw new error('请求失败');
    }
    
    const { data } = await response.json();
    rendertable(data);
    pagination.pagenum = pagenum; // 更新当前页码
  } catch (error) {
    console.error('加载分页数据失败：', error.message);
  }
}

// 绑定分页控件事件（上一页/下一页/页码点击）
document.getelementbyid('prev-page').addeventlistener('click', () => {
  if (pagination.pagenum > 1) {
    loadpagedata(pagination.pagenum - 1);
  }
});

document.getelementbyid('next-page').addeventlistener('click', () => {
  if (pagination.pagenum < pagination.totalpages) {
    loadpagedata(pagination.pagenum + 1);
  }
});

// 初始化加载第一页
loadpagedata(1);

// 懒加载核心状态
const lazyloadstate = {
  pagenum: 1,
  pagesize: 10,
  isloading: false, // 防止重复请求
  hasmore: true // 是否还有更多数据
};

// 渲染列表数据
function renderlist(data) {
  const listcontainer = document.getelementbyid('list-container');
  data.foreach(item => {
    const listitem = document.createelement('div');
    listitem.classname = 'list-item';
    listitem.innerhtml = `<h4>${item.name}</h4><p>${item.desc}</p>`;
    listcontainer.appendchild(listitem);
  });
}

// 加载下一页数据
async function loadnextpage() {
  if (lazyloadstate.isloading || !lazyloadstate.hasmore) return;
  
  lazyloadstate.isloading = true;
  try {
    const response = await fetch(`/api/users?pagenum=${lazyloadstate.pagenum}&pagesize=${lazyloadstate.pagesize}`, {
      method: 'get',
      headers: { 'content-type': 'application/json' }
    });
    
    if (!response.ok) {
      throw new error('请求失败');
    }
    
    const { data, total } = await response.json();
    renderlist(data);
    
    // 判断是否还有更多数据
    const loadedtotal = (lazyloadstate.pagenum) * lazyloadstate.pagesize;
    lazyloadstate.hasmore = loadedtotal < total;
    
    // 更新页码
    lazyloadstate.pagenum++;
  } catch (error) {
    console.error('加载数据失败：', error.message);
  } finally {
    lazyloadstate.isloading = false;
  }
}

// 监听滚动事件，触发懒加载
window.addeventlistener('scroll', () => {
  // 计算滚动距离：视口高度 + 滚动条滚动距离 >= 文档高度 - 触发阈值（如100px）
  const scrolltop = document.documentelement.scrolltop || document.body.scrolltop;
  const clientheight = document.documentelement.clientheight;
  const scrollheight = document.documentelement.scrollheight;
  
  if (scrolltop + clientheight >= scrollheight - 100) {
    loadnextpage();
  }
});

// 初始化加载第一页
loadnextpage();