你如何处理来自 AJAX 调用的错误？

Posted 2023-05-09

【中文标题】你如何处理来自 AJAX 调用的错误？

【英文标题】：How do you handle errors from AJAX calls?

【发布时间】：2010-09-29 06:52:27

【问题描述】：

假设我有以下 jQuery AJAX 调用：

$.ajax(
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result)
        // Do stuff
   
 );

现在，当进行此 AJAX 调用时，我希望服务器端代码运行一些错误处理检查（例如，用户是否仍然登录，他们是否有权使用此调用，数据是否有效等）。如果检测到错误，如何将该错误消息冒泡回客户端？

我最初的想法是返回一个带有两个字段的 JSON 对象：error 和 errorMessage。然后将在 jQuery AJAX 调用中检查这些字段：

$.ajax(
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result)
       if (result.error == "true") 
       
           alert("An error occurred: " & result.errorMessage);
       
       else 
       
           // Do stuff
       
   
 );

这对我来说有点笨拙，但它确实有效。有没有更好的选择？

【参考方案1】：

就我个人而言，我的库中有与以下代码类似的代码。

$.ajaxSetup(
    error: function(xhr)
        alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
    
);

jQuery docs Ajax/jQuery.ajaxSetup

将该错误从服务器端（使用 php）冒泡到客户端的最佳方法是通过 Ajax 请求在 400 的某处发送标头（始终与错误相关联）。一旦 Ajax 请求收到它，它将触发您的错误函数。这也意味着您不必定义错误：在每个 $.ajax 调用中调用。

header('HTTP/1.0 419 Custom Error');

引用w3.org header information

错误 4xx、5xx 4xx 代码用于客户端似乎出错的情况，5xx 代码用于服务器知道服务器出错的情况。一般来说，不可能区分这些情况，因此差异只是信息性的。 正文部分可能包含以人类可读形式描述错误的文档。文档是 MIME 格式，并且只能是 text/plain、text/html 或请求中指定为可接受的格式之一。

【讨论】：

来自 jQuery 文档：“这可能会导致不良行为，因为其他调用者（例如，插件）可能期待正常的默认设置。因此，我们强烈建议不要使用此 API" api.jquery.com/jQuery.ajaxSetup

【参考方案2】：

$.ajax(
   type: "POST",
   url: "MyUrl",
   data: "val1=test",
   success: function(result)
        // Do stuff
   ,
   error: function(request,status,errorThrown) 
        // There's been an error, do something with it!
        // Only use status and errorThrown.
        // Chances are request will not have anything in it.
   
 );

【讨论】：

对我来说，状态总是“错误”，errorThrown 总是未定义。您如何从这里获得任何有趣的信息？

真的，OP 的想法是对的。如果您的 200 响应/结果将包含错误消息，则警告它的唯一方法是在成功函数中。有时您必须在if (msg.errors) do an alert 位之前执行msg = JSON.parse(response)，然后是else \\do the thing 。即使以相反的方式尝试（首先处理 msg.success）似乎给我带来了困难（在用户单击页面上的其他内容之前不会弹出警报）。

【参考方案3】：

jQuery ajax 函数最后不接受一个参数，即失败调用的回调吗？如果是这样，只需在成功回调后添加fail:function(...)..。

【讨论】：

是的，有一个“错误”回调与“成功”回调的工作方式相同。但是，我不确定返回 HTTP 错误是否是最好的方法。

只要你处理好服务器端的错误（日志等），发送到客户端是没有问题的，所以它也可以处理。

【参考方案4】：

在服务器端返回错误代码，使用与错误内容最相符的 HTTP 错误。然后使用错误回调。这也将允许您显示您的网络服务器给出的错误。

【参考方案5】：

回答这个问题已经很晚了，但我认为这对使用 es6 和 jquery 2.2 的人会有所帮助。

我通常在我的代码中遵循这个（延迟方法）

sendAjaxRequest(URL, dataToSend) 
    return $.ajax(
        type        : 'POST',
        url         : URL,
        data        : JSON.stringify(dataToSend),
        dataType    : 'json'
    ).fail((responseData) => 
        if (responseData.responseCode) 
            console.error(responseData.responseCode);
        
    );
,

我附加了一个延迟的fail 方法，如果发生错误，它将被调用。它是错误回调选项的替代构造，.fail() 方法替换了最新 jquery 中已弃用的 .error() 方法。

接下来从调用sendAjaxRequest的地方我用then jquery promise callback

sendAjaxRequest(URL, dataToSend)
.then(
     (success) => 
     ,
     (error) => 
     
);

它将根据从服务器收到的响应调用成功或错误函数。