javascript - $.when(ajax 1, ajax 2, ajax3).always(ajax 1,ajax 2,ajax3) 在 3 个请求完成之前触发

Question

我有 3 种不同的服务来索取数据。如果这 3 步成功，我就可以加载我的小部件了。如果 service1 和/或 service2 关闭或响应错误，我仍然可以加载具有有限功能的小部件。如果 service3 响应错误，无论 service1 和 2 是否工作正常，都意味着完全失败，我需要显示错误消息。

所以我尝试了这样的事情:

var s1=$.ajax(url_service1);
var s2=$.ajax(url_service2);
var s3=$.ajax(url_service3);

$.when(s1,s2,s3).always(s1,s2,s3){
   //here the code that looks which services are ok or wrong 
   //to decide what to show and how;
}

但是一旦其中一个服务响应错误，$.when().always() 代码就会触发。同样的情况也发生在

$when(s1,s2,s3).then( successfunc, failurefunc)

这意味着一旦触发失败回调，由于 3 个服务中的任何一个出现故障，我无法检查其他 2 个服务的状态。

所以也许我的 service1 出现故障，并且我无法检查 services2 和 3 是否正常。

到目前为止我发现的寻找3个服务完成的唯一方法，无论哪个是对还是错是:

$(document).ajaxStop(function(){
         console.log("finished");
});

但是，我正在开发一个小部件来插入任何页面。我希望它与其他内容隔离。所以我不希望我的小部件等待整个 $(document) 来解决其所有 ajax 请求(如果有的话)...

希望这是有道理的。我显然是 jquery ajax 请求的新手 谢谢!

Answer 1

这都是关于捕获错误(在 service1 和 service2 上)并从中恢复。

Promise 使异步错误恢复变得非常简单。在大多数 Promise 库中，您将链接 .catch()。 jQuery 还没有这个方法(滚动 jQuery v3!)，但是它仍然非常简单 - 链 .then() 并从其错误处理程序返回一个已解决的 promise 。

这是流量控制:

var s1 = $.ajax(url_service1).then(null, catch_);
var s2 = $.ajax(url_service2).then(null, catch_);
var s3 = $.ajax(url_service3);

$.when(s1, s2, s3).then(loadWidget, widgetFailure);

这里是一些示例函数:

function catch_(error) {
    // Return a fulfilled promise that delivers a detectable error code, eg -1. 
    // Any value will do, as long as it can be distinguished from a successful value.
    return $.when(-1);
}

function loadWidget(val1, val2, val3) {
    //Exactly what you write here depends on how the widget is initialized when val1 and/or val2 are missing.
    // eg ...
    if(val1 != -1 && val2 === -1) {
        //load limited widget based on val1 and val3
    } else if(val1 === -1 && val2 != -1) {
        //load limited widget based on val2 and val3
    } else if(val1 === -1 && val2 === -1) {
        //load limited widget based on val3
    } else {
        //load full widget based on val1, val2 and val3 
    }
}

function widgetFailure(error) {
    $("#errorMessage").text('Sorry, widget failed to initialize') // show error message
    console.log(error); // log error
}

注意:由于 $.ajax() 传递数据的方式，成功的 val1/val2/val3 将是数组，每个数组都包含 [data, textStatus, jqXHR]。您将对数据 val1[0]/val2[0]/val3[0] 感兴趣。

因此，您应该得到您想要的:

• 如果所有三项服务均成功，则表示完全成功。
• 如果服务 1 和/或服务 2 失败，则部分成功。
• 仅当服务 3 失败时才会完全失败，无论服务 1/服务 2 的结果如何。

<强> demo