javascript - 混合使用 ES6 Promise 和 JQuery Promise

Question

我使用过 $q (Angular.js)，并且经常会在 .then 调用中返回 promise 。结果是下一个 .then 调用将等待上一个 promise 完成。

我现在正在使用原生 es6 promises 来尝试“promisify”一个基于回调的库，但我无法这样做。

问题是 .then 链中的下一个值是一个 promise 对象，而不是该 promise 的解析值。它在 promise 解析之前调用下一个 .then 值，简单地返回最后一个返回值。

有没有办法等待之前的promise resolve？

例子:

$.ajax({
    url: "//localhost:3000/api/tokens",
    type: "POST",
    data: JSON.stringify({
      user: {
        email: 'admin@admin.com',
        password: 'password123'
      }
    }),
    contentType: "application/json"
})
.then(data => data.token.encoded)         // OK
.then(token => Farmbot({ token: token })) // OK
.then(function(bot){                      // OK
  return new Promise(function(resolve, reject) {
    bot.connect(function(){ resolve(bot); });
  });
}, errorr)
.then(function(bot){ // NOT OK!
  // passes in an unresolved promise object, which is useless.
  //
  bot; // => {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
});

我的问题是:

ES6 的 promises 是否等待前面的 .then 的 promise 来解决？

Answer 1

问题源于尝试在 Deferred promises 链中使用 native Promise。

目前(jQuery 1.8 – 2.x)，jQuery 的 .then() 定义在其对链接的支持中仅识别库自己的类型。

因此，您可以返回一个 $.Deferred() promise:

// ...
.then(function(bot){
  return $.Deferred(function(defer) {
    bot.connect(function(){ defer.resolve(bot); });
  });
}, errorr)
// ...

或者，您可以使用 Promise.resolve(thenable) 将 $.ajax() 给出的初始 $.Deferred() 转换为原生 Promise这样您就可以在整个链中使用 native .then()，它将识别返回的 new Promise()(以及 $.Deferred()):

Promise.resolve($.ajax({
  // ...
}))
.then(data => data.token.encoded)
// ...

---

或者，您可以尝试 jQuery 3.0，currently in beta :

jQuery.Deferred is now Promises/A+ compatible

jQuery.Deferred objects have been updated for compatibility with Promises/A+ and ES2015 Promises, verified with the Promises/A+ Compliance Test Suite. [...]

有了它，您的原始代码片段无需任何修改即可按预期工作。