如何在链接两个异步jQuery函数时完全避开jQuery承诺

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

JavaScript承诺是可互操作的。你可以随心所欲地混合它们，所有合适的库¹和本机承诺都接受来自任何实现任何³的enable ²。如果有外来的东西出现，他们就会在上面做Promise.resolve。

所以通常你会写你的代码，好像他们都使用相同的承诺实现，它只是工作。
但是，现在您想确保所有.then方法调用都使用您最喜欢的实现;或者您想使用非标准的方法或特性?为此，您必须显式地强制转换您直接调用方法的上的所有承诺 -而不是其他。

一些例子:

Promise.all([$.ajax(…), $.ajax(…)]).then(…); // just works!

$.ajax(…) // a jQuery promise
.then(…)  // so this would be jQuery `then`, which we don't want.

Promise.resolve($.ajax(…)) // explicit cast
.then(function(data) {     // native `then`
    return $.ajax(…);      //   just works!
})                         // returns a native promise still
.catch(…)                  // so we can use its features

_{1:是的，jQuery在3.0版本之前不是其中之一
2:所有的jQuery延迟和承诺都是这样的启用，尽管
3:真的到处你会期望一个承诺，在Promise.resolve, then回调返回值，Promise.all参数，…}

您可以采用两种方法中的一种…

转换后合并:

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承诺都解决时，它会解决，或者当其中一个承诺失败时被拒绝。

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

"转换然后合并"代码展开如下:

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中)到一个数组。

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
    }
);

<<p> 演示:解决/strong>

演示:拒绝