如何连锁承诺

Question

在这个简化的示例中，当第一个承诺得到解决时，我将调用三个函数。

var test = new Promise(function (res, err) { setTimeout(res, 3000) })

test.then( () => { console.log("A") });
test.then( () => { 
    return new Promise(function(res, err) { 
        setTimeout(()=> { console.log("C"); 
        res() }, 3000) 
    }); 
});

test.then( () => { console.log("B") });

预期的输出是A B C。

让我们假设，只有当第二个承诺得到解决时，我才想调用第三个.then来控制台B。

如果我试图将第二个承诺(myProm)存储在全局中并在其上附加一个.then函数，我将(合理地)获得一个TypeError，因为在编译时myProm仍未定义。

var test = new Promise(function (res, err) { setTimeout(res, 3000) })
var myProm;

test.then( () => { console.log("A") });
test.then( () => { 
    myProm = new Promise(function(res, err) { 
        setTimeout(()=> { console.log("C"); 
        res() }, 3000) 
    })
    return myProm;
});

myProm.then( () => { console.log("B") });

我该怎么做？将两个承诺链接在一起的最佳方式是什么，以便在我们执行下一个.then之前，需要解析来自一个then的返回承诺obj。

在这个场景中，我想要的输出是A C B

Answer 1

每次调用.then时，都会创建一个新的Promise，当该.then返回的Promise解析时，该.then就会解析。应该将myProm-containing .then的结果分配给一个变量，然后对该变量调用.then：

​

var test = new Promise(function (res, err) { setTimeout(res, 500) })
var myProm;

test.then( () => { console.log("A") })
  .then( () => { 
      myProm = new Promise(function(res, err) { 
          setTimeout(()=> { console.log("C"); 
          res() }, 500) 
      })
      return myProm;
  })
  .then( () => { console.log("B") });

​

在大多数情况下，当使用Promises时，您应该像这样链接.then。只有当您想在prom.then(...) ... prom.then(...)解析时初始化两个完全独立的异步操作时才执行prom。

Answer 2

then返回一个承诺，在指定的函数运行并且它返回的值已经解析时解决这个问题(这稍微简化了一些，但是对于这里的任务来说已经足够了)。

因此，要根据then的结果连锁一个承诺。只需点击另一个.then

​

var test = new Promise(function (res, err) { setTimeout(res, 3000) })

test.then( () => { console.log("A") });
test
    .then( () => { 
        return new Promise(function(res, err) { 
            setTimeout(()=> { console.log("C"); res() }, 3000);
        });
    })
    .then( () => { console.log("B") });

​