包装 jQuery 的 $.ajax() 方法来定义全局错误处理

Posted

技术标签:

【中文标题】包装 jQuery 的 $.ajax() 方法来定义全局错误处理【英文标题】:Wrap jQuery's $.ajax() method to define global error handling 【发布时间】:2011-05-19 12:31:06 【问题描述】:

从this one 之类的问题中分离出来,我希望包装jQuery 的$.ajax() 方法,这样我就可以在一个位置提供错误处理,然后所有应用程序的远程调用都会自动使用该方法。

简单的方法是简单地创建一个新名称,类似于 $.get() 和 $.post() 如何实现 $.ajax() 的外观。但是,我希望重用名称 $.ajax(),这样我们就可以使用标准的 jQuery 语法来保留我们的其余代码,从而隐藏我们添加了自己的错误处理的事实。这是否实用和/或好实现,或者可能是一个可怕的想法?

编辑:到目前为止的响应表明 .ajaxError() 是要走的路。我知道这会捕获 400 和 500 级错误,但是有没有办法(使用此事件处理程序或其他方式)也可以捕获 302 重定向?我正在尝试处理重定向到登录页面的响应,但我们希望在它是 XHR 请求时拦截该重定向,允许用户取消操作而不是强制它们自动转发。

【问题讨论】:

附带说明,对未登录的 AJAX 请求的响应可能应该返回 401 而不是 302。无论如何值得深思。 【参考方案1】:

你可能想看看$.ajaxError

$(document).ajaxError(function myErrorHandler(event, xhr, ajaxOptions, thrownError) 
  alert("There was an ajax error!");
);

jQuery 提供a whole bunch of other ways to attach global handlers。

要回答您的编辑,您可以使用 $.ajaxSuccess 捕获成功的 ajax 请求,并且您可以使用 $.ajaxComplete 捕获所有(成功和失败)请求。可以从xhr参数中获取响应码,比如

$(document).ajaxComplete(function myErrorHandler(event, xhr, ajaxOptions, thrownError) 
  alert("Ajax request completed with response code " + xhr.status);
);

【讨论】:

@Marc L:已编辑以匹配您的额外信息。此外,您可能会觉得这很有趣:***.com/questions/199099/… 尝试$(document).ajaxError(…); - 使用$.ajaxError(...) 对我不起作用。 这不会捕获 302/重定向 :( - 否则很好的解决方案!【参考方案2】:

jQuery 有一个名为 $.ajaxSetup() 的方便方法,它允许您设置适用于所有基于 jQuery 的 AJAX 请求的选项。通过将此方法放在您的主文档准备功能中,所有设置将自动应用于您的其余功能并在一个位置

$(function () 
    //setup ajax error handling
    $.ajaxSetup(
        error: function (x, status, error) 
            if (x.status == 403) 
                alert("Sorry, your session has expired. Please login again to continue");
                window.location.href ="/Account/Login";
            
            else 
                alert("An error occurred: " + status + "nError: " + error);
            
        
    );
);

参考:https://cypressnorth.com/programming/global-ajax-error-handling-with-jquery/

【讨论】:

我认为这比 ajaxError() 更好,因为不需要将侦听器绑定到 DOM,并且当你说全局时更有意义。 @Wancieho Global callback functions should be set with their respective global Ajax event handler methods—.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()—rather than within the options object for $.ajaxSetup(). As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxError() method, must be attached to document. 为丑陋的格式道歉,只能在评论中做这么多?【参考方案3】:

实际上,jQuery 提供了这个钩子,.ajaxError() 就是为了这个目的。当来自页面的 ajax 请求完成并出现错误时,将调用您与 $ajaxError() 绑定的所有处理程序。指定选择器允许您在 .ajaxError() 处理程序中引用 this

要使用它来处理页面上的所有 ajax 请求错误并使用this 指向document,您可以执行以下操作:

$(document).ajaxError(function(event, request, settings)
   alert("Error requesting page: " + settings.url);
);

【讨论】:

澄清一下,ajaxError 处理所有 ajax 失败,而不仅仅是那些匹配选择器的失败。使用选择器只允许您在回调中使用 this 关键字来引用该元素。【参考方案4】:

我认为这是个坏主意。我认为包装$.ajax 很好,但您正在谈论重新定义它。任何没有意识到这一点的人都会得到意想不到的结果。

正如其他人所提到的,将处理程序绑定到$.ajaxError 是可行的方法。

【讨论】:

以上是关于包装 jQuery 的 $.ajax() 方法来定义全局错误处理的主要内容,如果未能解决你的问题,请参考以下文章

jquery AJAX提交前beforesend无效,大家帮我看下谢谢。

JQuery - $.ajax() - 使用 JSONP 的跨域 - 仅在 IE 8 中获取“解析器错误”(在 IE 7 中工作)

原生javascript包装一个ajax方法

重复 jQuery ajax 调用

围绕DataTable';允许在Rails应用程序中与服务器端分页同步的ajax方法

Jquery中ajax的使用