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）在第一个＆＃39;然后＆＃39;价值：2
  3）在决赛之内＆＃39;然后＆＃39;与英雄：[对象，对象]

getHeroUnChain()的输出：

1）在setTimeout内   2）setTimeout解决了
  2）在第一个＆＃39;然后＆＃39;价值：2
  3）在决赛之内＆＃39;然后＆＃39;与英雄：2

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

Answer 1

这是因为您在mainPromise中返回getHerosSlowlyUnchained。每次调用then或类似方法都会在链中返回新保证。

在getHeroChain中，您的链是：setTimeout - ＆gt; setTimeout resolved - ＆GT; final then。

在getHeroUnChain您的链条中：setTimeout - ＆gt; [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()始终会生成新的承诺，因此在您的UnChained函数中，您应该返回新的承诺，而不是旧的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;
}

JavaScript承诺：链接承诺混淆

2 个答案: