Node.js中点击事件触发Ajax请求异常问题咨询

看起来你遇到的这个问题很典型，大概率和浏览器的并发HTTP连接限制或者后端请求处理未正确释放资源有关，咱们一步步拆解分析：

先排查前端可能的问题 #

你的前端代码每次点击都创建新的XMLHttpRequest实例，这本身没问题，但有几个细节可以优化，同时排除潜在问题：

• 检查是否存在未取消的重复请求：比如用户快速连续点击，可能前几次请求还在pending状态，导致浏览器队列堆积。可以在每次发起请求前，取消上一次未完成的请求：

  // 把xhttp变量提升到外部作用域，方便复用和取消
  let xhttp = null;
  function handleClick() {
    // 如果之前有未完成的请求，先取消
    if (xhttp && xhttp.readyState !== 4) {
      xhttp.abort();
    }
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          // 无论成功失败，都可以在这里做一些清理
          if (this.status == 200) {
            // 处理成功响应
          } else {
            // 处理错误
          }
        }
    };
    xhttp.open("POST", "/test1", true);
    // 记得设置POST请求的Content-Type，方便后端解析请求体
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send();
  }
  

• 浏览器对同一域名的并发连接数有限制（比如Chrome默认是6个），当你连续发起第7次请求时，它会被放到队列里，等前面的连接释放后才会发送，这就导致了"变慢"的现象。刷新页面后，之前的连接被重置，所以又能正常发起6次请求。

再检查后端Node.js的问题 #

你的后端router.post('/test1')代码没贴全，但大概率是请求处理没有正确结束，导致连接没有被释放，占满了连接池：

• 确保每个请求都调用了res.send()/res.json()/res.end()来结束响应，哪怕是错误情况：

  router.post('/test1', function(req, res) {
    try {
      // 你的业务逻辑代码
      // 处理完一定要结束响应
      res.status(200).json({ success: true });
    } catch (err) {
      // 错误情况也要结束响应，避免连接挂起
      res.status(500).json({ error: err.message });
    }
  });
  

• 检查是否有异步操作未正确处理：比如你的业务逻辑里有数据库查询、文件读写等异步操作，但没有等待它们完成就结束了响应，或者异步操作出错后没有捕获，导致连接一直处于pending状态。
• 查看Node.js的连接池配置：如果使用了Express等框架，默认的连接处理是没问题的，但如果自定义了HTTP服务器的maxConnections，可能设置得太小，导致连接被占满。

验证方法 #

1. 打开浏览器的开发者工具（F12），切换到Network标签，连续点击触发请求，观察第7次请求的状态：如果是pending直到前面的请求完成才变为200，那就是浏览器并发限制的问题；如果第7次请求的Waiting (TTFB)时间特别长，那就是后端没有及时响应。
2. 在后端的/test1路由里加上日志，记录每个请求的开始和结束时间，看是否有请求一直没有结束，导致连接被占用。

总结 #

最可能的两个原因：

1. 浏览器并发连接限制（默认6个），第7次请求排队等待；
2. 后端请求未正确结束，连接挂起导致连接池被占满。

先从后端排查是否所有请求都正确结束响应，再优化前端的请求管理，应该就能解决问题了。

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