ajax 调用有时会被 chrome 取消

Question

我的ajax代码是

var auto_refresh = setInterval(function () {
    $.ajax({
            type: 'post',
            url: 'lib/nav.php',
            data: 'c=autchk',
            success: function (result) {
                $('#test-div').html(result);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // I don't know how to display error message
                console.log('Error: '+jqXHR+' '+textStatus+' '+errorThrown);
            }
        });
}, 9000);

请求有时会在超时之前被取消。 在 chrome 日志中，取消请求的状态是停滞的。然后我阅读了导致我这样做的解释

排队。浏览器在以下情况下对请求进行排队：

• 有更高优先级的请求。
• 已经有六个 TCP 为这个来源打开的连接，这是限制。适用于 仅限 HTTP/1.0 和 HTTP/1.1。

停滞不前。请求可能由于排队中描述的任何原因而停止。

问题是因为这个还是其他原因？

编辑：

我在 3 个浏览器中测试代码

我在 Microsoft Edge 中没有看到任何已取消的请求。 Chrome 中的内容比 Firefox 更多。

Answer 1

所有浏览器都限制了对同一来源的并发调用，已经有很好的讨论：Max parallel http connections in a browser?

问题是您以错误的方式实现自动刷新， 您正在使用的正在调用：Polling，您基本上会定期调用服务器，但有时可能会发生您已经有其他调用正在进行中的情况，这将导致取消。

轮询是一种非常古老的方法，您应该看看WebSockets 或Server Side Events，这绝对是处理服务器端更改并将其反映到 UI 中的最佳方法。

如果您无法实现它们，那么您可能需要Long Polling Strategy，这是一种古老但仍然有价值的方法。

还有其他信息：What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?

function auto_refresh(onSuccess, onError, onEnd, rate, times) {
  onSuccess = onSuccess || $.noop;
  onError = onError || $.noop;
  onEnd = onEnd || $.noop;
  
  rate = Number(rate) || 9000;
  times = Number(times) || Infinity
  
  function iteration() {
    return $
      .post('lib/nav.php', 'c=autchk')
      .then(onSuccess)
      .fail(onError)
      .always(function() {
        if(Number.isFinite(times)) {
          times -= 1;

          if(times <= 0) {
            return onEnd();
          }
        }

        return auto_refresh(onSuccess, onError, onEnd, rate, times);
      })
    ;
  }
  
  return window.setTimeout(iteration, rate);
}


auto_refresh(function(result) {
  return $('#test-div').html(result).promise();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>