JavaScript的承诺：链接许诺混乱

Question

我一直在玩Promises，以下示例中的链接未返回预期的结果。 getHeroChain()函数按预期工作，但getHeroUnChain()函数不起作用。 在两种情况下，如预期的执行顺序，但是，在getHeroUnChain()即上次then函数不返回预期值（ HEROES数组）。

var HEROES = [{
    id: 11,
    name: 'Mr. Nice'
}, {
    id: 12,
    name: 'Narco'
}, ];

function getHeros() {
    return Promise.resolve(HEROES); // resolved promise
}

function getHerosSlowlyChained() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log(" 1) inside setTimeout");
            resolve(2);
        }, 2000);

    }).then(function(value) {

        console.log(" 2) setTimeout resolved");
        console.log(" 2) inside 1st 'then' with value : " + value);
        return getHeros(); //return promise
    });
}

function getHerosSlowlyUnchained() { //not directly chained
    var mainPromise = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log(" 1) inside setTimeout");
            resolve(2);
        }, 2000);
    });

    mainPromise.then(function(value) {

        console.log(" 2) setTimeout resolved");
        console.log(" 2) inside 1st 'then' with value : " + value);
        return getHeros(); //return promise

    });

    return mainPromise;
}

//Chained
function getHeroChain() {

    var heroPromise = getHerosSlowlyChained();

    heroPromise.then(function(heroes) {
        console.log(" 3) inside final 'then' with heroes :");
        console.log(heroes);
    });

}
//Un-Chained
function getHeroUnChain() {

    var heroPromise = getHerosSlowlyUnchained();

    heroPromise.then(function(heroes) {
        console.log(" 3) inside final 'then' with heroes :");
        console.log(heroes);
    });

}

//getHeroChain();
getHeroUnChain();

getHeroChain()输出：

1）在setTimeout里面
2）setTimeout解决
2）在第一个“ then”内，值：2
3）在最终的'then'中放入英雄：[Object，Object]

getHeroUnChain()输出：

1）在setTimeout里面
2）setTimeout解决
2）在第一个“ then”内，值：2
3）与英雄一起进入决赛'then'：2

JSBIN链接： https ://jsbin.com/pivoyuyawu/edit ? js

Answer 1

这是因为您返回mainPromise在getHerosSlowlyUnchained 。 每次对then或类似方法的调用都会在链中返回一个新的 Promise。

在getHeroChain ，您的链为： setTimeout > setTimeout resolved -> final then 。

在getHeroUnChain您的链为： setTimeout > [ setTimeout resolved ， final then ]。

请注意，在第二个示例中， setTimeout resolved和final then都在setTimeout之后。 这意味着两者均给定2 。

要解决，要么

return mainPromise.then(function(value) {

    console.log(" 2) setTimeout resolved");
    console.log(" 2) inside 1st 'then' with value : " + value);
    return getHeros(); //return promise

});

要么

mainPromise = mainPromise.then(function(value) {

    console.log(" 2) setTimeout resolved");
    console.log(" 2) inside 1st 'then' with value : " + value);
    return getHeros(); //return promise

});
return mainPromise;

Answer 2

.then()总是生成一个新的Promise，因此在UnChained函数中，您应该返回新的Promise，而不是旧的mainPromise

function getHerosSlowlyUnchained() { //not directly chained
    var mainPromise = new Promise(function(resolve, reject) {
        setTimeout(function() {
            console.log(" 1) inside setTimeout");
            resolve(2);
        }, 2000);
    });

    // this will generate a new promise, you should return the new one
    // instead of the old mainPromise
    mainPromise.then(function(value) {

        console.log(" 2) setTimeout resolved");
        console.log(" 2) inside 1st 'then' with value : " + value);
        return getHeros(); //return promise

    });

    return mainPromise;
}