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

Posted 2023-05-07

【中文标题】包装 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 是可行的方法。