如何解决一个又一个的promise？

Question

我怎么能一个接一个地兑现承诺？

waitFor(t)，是一个函数，它返回一个在t 时间之后解析的承诺。我希望能够做到的是：

waitFor(1000) Then when finished, console.log('Finished wait of 1000 millis') then
waitFor(2000) Then when finished, console.log('Finished wait of 2000 millis') then
waitFor(3000) Then when finished, console.log('Finished wait of 3000 millis')

这是我尝试过的：

waitFor(1000).then(function(resolve, reject) {
    console.log(resolve);
}).then(waitFor(2000).then(function(resolve, reject) {
    console.log(resolve);
})).then(waitFor(3000).then(function(resolve, reject) {
    console.log(resolve);
}));

不幸的是，这个 console.logs 每隔 1 秒记录一次语句，这意味着所有的 Promise 都是一次调用的。

我设法通过这样的回调解决了这个问题，但这让一切变得非常丑陋：

waitFor(1000).then(function(resolve, reject) {
    console.log(resolve+' @ '+(new Date().getSeconds()));
    waitFor(2000).then(function(resolve, reject) {
        console.log(resolve+' @ '+(new Date().getSeconds()));
        waitFor(3000).then(function(resolve, reject) {
            console.log(resolve+' @ '+(new Date().getSeconds()));
        });
    });
});

那么我应该如何使用可以使它工作的承诺来做到这一点，而不是使用丑陋的回调地狱？

不想要的结果：http://jsfiddle.net/nxjd563r/1/

想要的结果：http://jsfiddle.net/4xxps2cg/

Answer 1

您可以将 Promise 放入数组并使用 reduce 链接它们，从一个额外的已解决 Promise 开始。

function waitPromise(time) {
  //console.log(time);
  return new Promise( (resolve,reject) => {
    setTimeout( () => {resolve('resolved');}, time);
  });
}

function log(data) {
  return new Promise( (resolve,reject) => {
    console.log( data +' @ '+(new Date().getSeconds()));
    resolve();
  });
}

var ps = [];
for (var i=0;i<3;i++) {
  let time = (i+1) * 1000;
  ps.push( () => waitPromise(time) );
  ps.push( log );
}


console.log( 'started' +' @ '+(new Date().getSeconds()));
var p = Promise.resolve();
ps.reduce( (p,c) => {return p.then(c)}, p);

Answer 2

我找到了你的解决方案。

您需要让每个then 返回一个新的承诺，以便下一个then 在前一个得到解决后做出反应。

waitFor(1000).then(function(result) {
    $('#result').append(result+' @ '+(new Date().getSeconds())+'<br>');
    return waitFor(2000);
}).then(function(result) {
    $('#result').append(result+' @ '+(new Date().getSeconds())+'<br>');
    return waitFor(3000);
}).then(function(result) {
    $('#result').append(result+' @ '+(new Date().getSeconds())+'<br>');
});

jsfiddle http://jsfiddle.net/4xxps2cg/2/

Answer 3

waitFor() 似乎立即在 .then() 处被调用；尝试从 .then() 匿名函数中返回 waitFor()。

也可以创建持续时间值数组，使用Array.prototype.shift() 调用waitFor，每个持续时间值连续，或将参数timeout 传递给waitFor；如果在每个 .then() 调用相同的进程，则在 waitFor 中包含链接到 Promise 的 .then() 的进程；在.then() 调用相同的函数waitFor 链接到初始waitFor() 调用

var t = [1000, 2000, 3000];
function waitFor(timeout) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("`Finished waiting ${timeout} milliseconds`");
        }, timeout && t.shift() || t.shift());
    }).then(function (data) {
      $('#result').append(data + ' @ ' + new Date().getSeconds() + '<br/>'); 
    })
}

waitFor().then(waitFor).then(waitFor)
//.then(function() {return waitFor(5000)})

Answer 4

调用和等待的格式有点偏离，你的then 应该是一个返回承诺的函数，因为现在你传递的是函数调用而不是函数，它会立即运行该请求而不是等待作为 promise 的结果调用函数。

应该这样做：

function waitFor(timeout) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(`Finished waiting ${timeout} milliseconds`);
        }, timeout);
    });
}

waitFor(1000).then(function(resolve, reject) {
    $('#result').append(resolve+' @ '+new Date().getSeconds()+'<br/>');
}).then(function(){
    return waitFor(2000)
}).then(function(resolve, reject) {
    $('#result').append(resolve+' @ '+new Date().getSeconds()+'<br/>');
}).then(function() {
    return waitFor(2000)
}).then(function(resolve, reject) {
    $('#result').append(resolve+' @ '+new Date().getSeconds()+'<br/>');
})