[英]JavaScript Promises: Chaining promise confusion
I've been playing with Promises and the chaining in the following example doesn't return the expected result. 我一直在玩Promises,以下示例中的链接未返回预期的结果。 The
getHeroChain()
function works as expected, but the getHeroUnChain()
function doesn't. getHeroChain()
函数按预期工作,但getHeroUnChain()
函数不起作用。 In both cases, the execution order is as expected, but, in getHeroUnChain()
, that last then
function doesn't return the expected value (the HEROES
array). 在两种情况下,如预期的执行顺序,但是,在
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();
Output of getHeroChain()
: getHeroChain()
输出:
1) inside setTimeout
1)在setTimeout里面
2) setTimeout resolved2)setTimeout解决
2) inside 1st 'then' with value : 22)在第一个“ then”内,值:2
3) inside final 'then' with heroes : [Object, Object]3)在最终的'then'中放入英雄:[Object,Object]
Output of getHeroUnChain()
: getHeroUnChain()
输出:
1) inside setTimeout
1)在setTimeout里面
2) setTimeout resolved2)setTimeout解决
2) inside 1st 'then' with value : 22)在第一个“ then”内,值:2
3) inside final 'then' with heroes : 23)与英雄一起进入决赛'then':2
JSBIN link : https://jsbin.com/pivoyuyawu/edit?js JSBIN链接: https ://jsbin.com/pivoyuyawu/edit ? js
This is because you return mainPromise
in getHerosSlowlyUnchained
. 这是因为您返回
mainPromise
在getHerosSlowlyUnchained
。 Every call to then
or similar methods returns a new promise in the chain. 每次对
then
或类似方法的调用都会在链中返回一个新的 Promise。
In getHeroChain
, your chain is: setTimeout
-> setTimeout resolved
-> final then
. 在
getHeroChain
,您的链为: setTimeout
> setTimeout resolved
-> final then
。
In getHeroUnChain
your chain is: setTimeout
-> [ setTimeout resolved
, final then
]. 在
getHeroUnChain
您的链为: setTimeout
> [ setTimeout resolved
, final then
]。
Note that in the second example, both setTimeout resolved
and final then
are after setTimeout
. 请注意,在第二个示例中,
setTimeout resolved
和final then
都在setTimeout
之后。 This means that both are given 2
. 这意味着两者均给定
2
。
To fix, either do 要解决,要么
return mainPromise.then(function(value) {
console.log(" 2) setTimeout resolved");
console.log(" 2) inside 1st 'then' with value : " + value);
return getHeros(); //return promise
});
or 要么
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;
.then()
always generate a new promise, so in your UnChained function, you should return the new promise, instead of the old mainPromise .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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.