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