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

Question

从像这个问题这样的问题分支出来，我正在寻找包装 jQuery 的 $.ajax() 方法，以便我可以在一个位置提供错误处理，然后应用程序的所有远程调用都会自动使用该错误处理。

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

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

Answer 1

您可能需要查看 $.ajaxError。

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

jQuery 提供一大堆附加全局处理程序的其他方法。

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

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

Answer 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/

Answer 3

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

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

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

Answer 4

在某些情况下，您可能希望在调用本地错误处理函数之前进行全局错误处理。

像本示例中那样使用 $.ajaxPrefilter 是最佳解决方案我：

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
    let error = options.error;
    options.error = function (jqXHR, textStatus, errorThrown) {
        // global error handling first
        console.log('global ajax error');
        
        // override local error handling if exists
        if ($.isFunction(error)) {
            return $.proxy(error, this)(jqXHR, textStatus, errorThrown);
        }
    };
});

Answer 5

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

正如其他人提到的，将处理程序绑定到 $.ajaxError 是正确的方法。