【问题标题】:ajax requests hangs in chrome after connection lost连接丢失后,ajax 请求在 chrome 中挂起
【发布时间】:2018-03-22 23:27:49
【问题描述】:

我注意到 google chrome 中有一些奇怪的行为:

  • 如果我们在没有网络连接的情况下发送 ajax 后请求,我们会在控制台中收到 err_internet_disconnected 异常(我认为,没关系)
  • 如果我们在这个请求期间发送了长的 ajax 请求并失去了网络连接,谷歌浏览器不会中止它,控制台和 devconsole 的网络选项卡中没有 err_internet_disconnected 异常,这个请求被标记为待处理(即使在连接出现之后) .事实上,这个连接挂了,没有机会在 js 代码中处理这个(我们期望得到 ajax 错误,但没有任何反应)。

您对如何处理这种行为有什么建议吗?

编辑: 代码示例:

$.ajax({
   url: "https://someserver.com/ws.asmx/ExecuteEx?pureJson",
   type: "POST",
   contentType: "application/json",
   data: data,
   success: function() {
      console.log("success");
   },
   error: function() {
      console.log("error");
   }
})

我在编辑这篇文章时在此页面的 chrome 开发控制台中尝试了此代码。截图如下。 第一个请求是我的。我发送了它,然后拔下网线。 第二个请求失败(因为拔掉了网线)。 然后我插入网线,第三次请求成功。但是第一个请求仍然处于待处理状态(尽管网络连接丢失)。

devconsole's network tab

【问题讨论】:

  • 你能发布你的ajax代码吗?
  • @DiskJunky ,是的,我已经编辑了这篇文章
  • 您是否设置了timeout 属性?见Set timeout for ajax (jQuery)。如果超时后连接丢失,那应该中止请求。您是否也测试过任何其他浏览器,例如 FireFox 或 IE?
  • 至少 FireFox 具有相同的行为。我知道“超时”属性,但即使需要数小时来处理服务器上的请求,我们也需要得到结果。但是你提到的 timeout 属性让我知道如何使用 timeout 绕过这个问题。

标签: jquery ajax


【解决方案1】:

设置timeout 属性。如果超时后连接丢失,则应该中止请求。

$.ajax({
   url: "https://someserver.com/ws.asmx/ExecuteEx?pureJson",
   type: "POST",
   contentType: "application/json",
   data: data,
   timeout: 1000, // value in milliseconds
   success: function() {
      console.log("success");
   },
   error: function() {
      console.log("error");
   }
})

另见ajax documentation

超时

为请求设置超时(以毫秒为单位)。值为 0 表示不会有超时。这将覆盖使用 $.ajaxSetup() 设置的任何全局超时。超时时间从 $.ajax 调用开始;如果有几个其他请求正在进行,并且浏览器没有可用的连接,则请求可能会在发送之前超时。

【讨论】:

  • 如果等待时间增加(超过 1000 毫秒超时),ajax 会发生什么? ajax 会继续处理请求吗?如果我们不拔掉连接会发生什么?并且 ajax 不断请求服务器和 xhr 在控制台中以红色显示(待处理)?如何处理?以及如何复制/测试这种情况?
  • @CuriousDeveloper - 现有问题的 cmets 不是询问您的问题或任何新问题的正确位置。请使用您的具体和相关详细信息打开一个新问题。另请参阅How to Ask
【解决方案2】:

尝试替换$中的错误函数。 Ajax({用这段代码比较结果

error: function (request, status, error) {
        console.log(request.responseText);
        console.log(request.status);
        console.log(request.error);
    }

希望对你有所帮助。

【讨论】:

  • 没用(
猜你喜欢
  • 1970-01-01
  • 2015-02-14
  • 2019-05-21
  • 2014-01-30
  • 2015-03-16
  • 2015-05-14
  • 1970-01-01
  • 2016-02-27
  • 2017-06-24
相关资源
最近更新 更多