链接两个异步 jQuery 函数时如何完全躲避 jQuery 承诺? [英] How to dodge jQuery promises completely when chaining two async jQuery functions?

问题描述

我看过很多关于新 EMCA 承诺的教程，这些承诺提倡避免 jQuery 库中的承诺".他们通常说你可以通过做这样的事情来躲避他们:

I've seen many tutorials on the new EMCA promises advocating avoidance of the "promises" in the jQuery library. They usually say that you can dodge them by doing something like this:

Promise.resolve($.getJSON(url, params)); // voila!  the jQuery promise is "gone"!

然而，当我必须将两个异步 jQuery 函数链接在一起时，这并没有真正起作用.如何在不使用 jQuery 的 then() 或 .when() 的情况下将两个 getJSON 调用(其中第二个调用取决于第一个调用)链接在一起?

However, this doesn't really work when I have to chain two async jQuery functions together. How would I chain two getJSON calls (where the second call depends on the first) together without using jQuery's then() or .when()?

相反，我只想使用 Promise.all 等

Instead, I only want to use Promise.all etc.

我认为一个类似的问题是交错 jquery 和 EMCA 承诺?

I think a similar question problem would be interleaving jquery and EMCA promises?

推荐答案

您可以采用以下两种方法中的任何一种...

You can adopt either of two approaches ...

转换然后组合:

var p1 = Promise.resolve($.getJSON(url_1, params_1)); // voila 1!
var p2 = Promise.resolve($.getJSON(url_2, params_2)); // voila 2!
var p3 = Promise.all([p1, p2]).then(...);

组合然后转换:

var p1 = $.getJSON(url_1, params_1);
var p2 = $.getJSON(url_2, params_2);
var p3 = Promise.resolve($.when(p1, p2)).then(...); // voila 1 and 2!

简单地说，任何一种方法都会给你一个原生的 ES6 承诺，p3，它在两个 jQuery 承诺都解决时解决，或者当任何一个承诺失败时被拒绝.

Straightforwardly, either approach will give you a native ES6 promise, p3, that resolves when both the jQuery promises resolve, or is rejected when either one of the promises fails.

但是，您可能对两次 getJSON() 调用的结果感兴趣，而 jQuery 在这方面很尴尬.jQuery 的 jqXHR 承诺将多个参数传递给它们的成功和错误回调，而 ES6 承诺只会接受一个；剩下的会被忽视.幸运的是，将多个参数捆绑在一起形成一个对象是相当简单的.这必须在转换为 ES6 之前在 jQuery 中完成.

However, you are probably interested in the results of the two getJSON() calls, and jQuery is awkward in this regard. jQuery's jqXHR promises pass multiple parameters to their success and error callbacks, whereas an ES6 promise will accept just one; the rest will be disregarded. Fortunately, it's fairly simple to bundle the multiple params together to make a single object. This has to be done in jQuery prior to conversion to ES6.

convert then combine"代码扩展如下:

The "convert then combine" code expands as follows :

var p1 = Promise.resolve($.getJSON(url_1, params_1).then(
    function(data, textStatus, jqXHR) {
        return { data:data, textStatus:textStatus, jqXHR:jqXHR };
    },
    function(jqXHR, textStatus, errorThrown) {
        return { jqXHR:jqXHR, textStatus:textStatus, errorThrown:errorThrown };
    }
));
var p2 = Promise.resolve($.getJSON(url_2, params_2).then(
    function(data, textStatus, jqXHR) {
        return { data:data, textStatus:textStatus, jqXHR:jqXHR };
    },
    function(jqXHR, textStatus, errorThrown) {
        return { errorThrown:errorThrown, textStatus:textStatus, jqXHR:jqXHR };
    }
));
var p3 = Promise.all([p1, p2]).then(
    function(results) {
        // results[0] will be an object with properties .data, .textStatus, .jqXHR 
        // results[1] will be an object with properties .data, .textStatus, .jqXHR 
    },
    function(rejectVal) {
        // rejectVal will be an object with properties .errorThrown, .textStatus, .jqXHR
    }
);

组合然后转换"方法稍微复杂一些，因为组合结果(在 jQuery 中)显示为 arguments 列表，它本身需要转换(仍然在 jQuery 中)为数组.

The "combine then convert" approach is slightly trickier as the combined results appear (in jQuery) as an arguments list, which itself needs to be converted (still in jQuery) to an Array.

var p1 = $.getJSON(url_1, params_1).then(
    function(data, textStatus, jqXHR) { 
        return { data:data, textStatus:textStatus, jqXHR:jqXHR }; 
    },
    function(jqXHR, textStatus, errorThrown) { 
        return { errorThrown:errorThrown, textStatus:textStatus, jqXHR:jqXHR }; 
    }
);
var p2 = $.getJSON(url_2, params_2).then(
    function(data, textStatus, jqXHR) { 
        return { data:data, textStatus:textStatus, jqXHR:jqXHR };
    },
    function(jqXHR, textStatus, errorThrown) { 
        return { errorThrown:errorThrown, textStatus:textStatus, jqXHR:jqXHR }; 
    }
);
var p3 = Promise.resolve($.when(p1, p2).then(function() {
    return [].slice.call(arguments);// <<< convert arguments list to Array
})).then(
    function(results) { 
        // results[0] will be an object with properties .data, .textStatus, .jqXHR
        // results[1] will be an object with properties .data, .textStatus, .jqXHR
    },
    function(rejectVal) { 
        // rejectVal will be an object with properties .errorThrown, .textStatus, .jqXHR
    }
);

演示:已解决

演示:被拒绝

这篇关于链接两个异步 jQuery 函数时如何完全躲避 jQuery 承诺?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！