如何链接承诺

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 只有当第二个承诺得到解决。

如果我尝试将第二个 Promise (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") });

我该如何进行？将两个 Promise 链接在一起的最佳方法是什么，以便在我们执行下一个 then 之前，需要解决从一个 .then 返回的 Promise obj。

在这种情况下，我希望得到的输出是A C B

Answer 1

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") });

Answer 2

每次调用.then 时，您都会创建一个新 Promise，当.then 返回的Promise 解析时，该Promise 就会解析。您应该将包含myProm 的.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 时，您应该像这样链接.thens。只有在 prom 解析后，当您想要初始化两个完全独立的异步操作时才执行 prom.then(...) ... prom.then(...)。