關於 Node.js Promise 然后返回？

Question

我對 Promise 感到困惑！

我使用Promise 然后沒有像這樣返回：

new Promise((resolve, reject) => {
    resolve("1");
}).then((v1) => {
    console.log("v1");
    new Promise((resolve, reject) => {
        //Time-consuming operation, for example: get data from database;
        setTimeout(() => {
            resolve(2)
        }, 3000);
    }).then((v11) => {
        console.log("v11");
    })
}).then((v2) => {
    console.log("v2")
});

我得到這個結果v1 v2 v11 。 然后，我使用另一種寫作方式，如下所示：

 new Promise((resolve, reject) => {
    resolve("1");
}).then((v1) => {
    console.log("v1");
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2)
        }, 3000)
    }).then((v11) => {
        console.log("v11");
    })
}).then((v2) => {
    console.log("v2")
});

我得到另一個結果v1 v11 v2 。

也許，還有一種情況：

new Promise((resolve, reject) => {
resolve("1");
}).then((v1) => {
console.log("v1");
return new Promise((resolve, reject) => {
    setTimeout(() => {resolve(2)}, 3000)
}).then((v11) => {
    console.log("v11");
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve(2)}, 4000)
    }).then(() => {
        console.log("v12")
    })
})
}).then((v2) => {
console.log("v2")
});

我得到這個結果v1 v11 v12 v2

我不明白第二次返回我想知道為什么我得到這個結果？

Answer 1

如果您實際打印已解析的 promise 的值而不僅僅是變量的名稱，則會更容易理解控制流：

版本 1

new Promise((resolve, reject) => {
    resolve("1");
}).then((v1) => {
    console.log("v1:", v1);
    new Promise((resolve, reject) => {
        //Time-consuming operation, for example: get data from database;
        setTimeout(() => {
            resolve(2)
        }, 3000);
    }).then((v11) => {
        console.log("v11:", v11);
    })
}).then((v2) => {
    console.log("v2:", v2)
});

版本 2

new Promise((resolve, reject) => {
    resolve("1");
}).then((v1) => {
    console.log("v1:", v1);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2)
        }, 3000)
    }).then((v11) => {
        console.log("v11:", v11);
    })
}).then((v2) => {
    console.log("v2:", v2)
});

版本 3

new Promise((resolve, reject) => {
resolve("1");
}).then((v1) => {
console.log("v1:", v1);
return new Promise((resolve, reject) => {
    setTimeout(() => {resolve(2)}, 3000)
}).then((v11) => {
    console.log("v11:", v11);
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve(2)}, 4000)
    }).then((v12) => {
        console.log("v12:", v12)
    })
})
}).then((v2) => {
console.log("v2:", v2)
});

現在您可以看到傳遞給回調的內容：

結果 1

v1: 1
v2: undefined
v11: 2

結果 2

v1: 1
v11: 2
v2: undefined

結果 3

v1: 1
v11: 2
v12: 2
v2: undefined

解釋

正如您在.then()處理程序中看到的那樣.then()您沒有返回承諾，它的作用就好像您返回了一個已解決且值為undefined承諾 - 就像您這樣做了：

return Promise.resolve(undefined);

因此可以立即調用下一個.then()處理程序。

另一方面，如果您返回一個尚未解決的承諾，那么下一個.then()處理程序將不會被立即調用，而只會在返回的承諾得到解決之后才會被調用。

這解釋了當您不返回承諾時不同的執行順序 - 發生的事情就好像已經解決的承諾為您隱式返回一樣。

Answer 2

    function one() {
    return new Promise((resolve,reject) => {
        setTimeout(function () {
            console.log("one 1 ");
            resolve('one one');
        }, 2000);
    });
}

function two() {
    return new Promise((resolve,reject) => {
        setTimeout(function () {
            console.log("two 2 ");
            resolve('two two');
        }, 10000);
    });
}

function three(){
    setTimeout(function () {
        console.log("three 3 ");
    }, 5000);
}

one().then((msg) => {
        console.log('one : ', msg);
        return two();
    }).then((msg) => {
        console.log('two :', msg);
        return three();
    }).then((msg) => {
        console.log('three :', msg);
    })
    .catch((error) => {
        console.error('Something bad happened:', error.toString());
    });

控制台三顯示未定義，因為三個未解析解析