Promise 链与 setTimeout

Question

我是 javascript 的大一新生，现在正在学习 Promise 部分。

下面我一直在尝试使用 setTimeout 编写 promise 链，并期望它在 2 秒后打印“第一个结果”，并在另外 2 秒后打印“第二个结果”。 但是，它同时打印“第一个结果”和“第二个结果”。

谁能告诉我我在哪里犯了错误？

var doSomething = new Promise(function(resolve,reject){ 
    setTimeout(function(){ 
        resolve('first result');  
    },2000); 
});

var doSomethingElse = new Promise(function(resolve,reject){ 
    setTimeout(function(){
        resolve('second result');  
    },2000); 
});

doSomething
    .then(function(result){
    console.log("This is the "+result); 
    return doSomethingElse;
    })
    .then(function(result){
        console.log("This is the "+result);
});

==============================

编辑：所以当我如下编写 promise 时，执行器函数（setTimeout）立即开始计数，并在 2 秒后解决。

var doSomething = new Promise(function(resolve,reject){   // starts counting here
    setTimeout(function(){ 
        resolve('first result');  
    },2000); 
});

However, if I wrap the promise inside a function as below, the executor function (setTimeout) starts counting only after I call the function. 这个对吗？

function doSomething(){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve('first result');
        },2000);
    })
}
doSomething(); // starts counting here

Answer 1

您正在创建 promise 并将其分配给doSomething 。 第一个计时器开始倒计时。

然后您立即创建另一个 promise 并将其分配给doSomethingElse 。 第二个计时器开始倒计时。

---

在第一个解决后，创建第二个 promise。

Answer 2

如所写， doSomething promise 和doSomethingElse promise 是在非常快速的连续创建的，并且将在大约 2 秒后快速连续解决。

代码中没有任何内容可以导致两个进程是连续的。 为此，您需要确保doSomethingElse在doSomething完成后 2 秒开始。

您可以通过多种方式组织代码来实现这一点。

例如，您可以将new Promise(...)表达式直接写入 Promise 链而不进行任何分配：

 new Promise(function(resolve, reject) { setTimeout(function() { resolve('first result'); }, 2000); }).then(function(result) { console.log("This is the " + result); return new Promise(function(resolve, reject) { setTimeout(function() { resolve('second result'); }, 2000); }); }).then(function(result) { console.log("This is the " + result); });

或者，您可以将doSomething和doSomethingElse编写为函数：

 function doSomething() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('first result'); }, 2000); }); } function doSomethingElse() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('second result'); }, 2000); }); } doSomething().then(function(result) { console.log("This is the " + result); return doSomethingElse(); }).then(function(result) { console.log("This is the " + result); });

或者，您可以编写一个doSomething() function 并调用它两次：

 function doSomething(value) { return new Promise(function(resolve,reject) { setTimeout(function() { resolve(value); },2000); }); } doSomething('first result').then(function(result) { console.log("This is the " + result); return doSomething('second result'); }).then(function(result) { console.log("This is the " + result); });

或者，回到doSomething()和doSomethingElse()作为单独的函数，您可以添加第三个logResult() function 来进行日志记录：

 function doSomething() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('first result'); }, 2000); }); } function doSomethingElse() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('second result'); }, 2000); }); } function logResult(result) { console.log("This is the " + result); } doSomething().then(function(result) { logResult(result); return doSomethingElse(); }).then(function(result) { logResult(result); });

上一个示例的一个很好的特性是 Promise 链将简化如下：

 function doSomething() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('first result'); }, 2000); }); } function doSomethingElse() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve('second result'); }, 2000); }); } function logResult(result) { console.log("This is the " + result); } doSomething().then(logResult).then(doSomethingElse).then(logResult);

如您所见，没有唯一的解决方案。