javascript - 如何在 ProtoType 中使用 Promises *around* 回调进行方法链接

Question

我正在尝试使用本教程实现“方法链接”( https://schier.co/blog/2013/11/14/method-chaining-in-javascript.html )

我的问题是我必须创建一个使用回调 API 的对象，如下所示

function Cook() {};

Cook.prototype.readOrder = function readOrder(callback) {
  setTimeout(function() {
    callback()
    console.log('Cook has read the order');
 }, 666);
};
Cook.prototype.createOrder = function createOrder(callback) {
  setTimeout(function() {
    callback()
    console.log('Cook has created the order');
  }, 1337);
};

我希望能够在不更改上面代码的情况下进行方法链接...

我的方法是创建一个新的 Cook 并将回调包装在 Promises 中。

类似这样的事情。

function NewCook(cook){
  self = this;
  this.readOrder = function() {
      var readOrderPromise = new Promise(function(resolve, reject) {
        cook.readOrder(resolve)
      })
      return self
    };

  this.createOrder = function() {
      var createOrder = new Promise(function(resolve, reject) {
        cook.createOrder(resolve)
      })
      return self
    };
};


var original = new Cook();
var newCook = new newCook(cook)

但是，当我将方法链接在一起时，第二个方法不会等待第一个方法解决。

  newCook.readOrder().createOrder()

我尝试更改我的代码以返回带有“Then”的 promise ，如下所示

this.readOrder = function() {
  var readOrderPromise = new Promise(function(resolve, reject) {
    cook.readOrder(resolve)
  }).then(function(){return self})

  return readOrderPromise
};

但是，使用此代码时，我收到一条错误消息

TypeError: Cannot read property 'createOrder' of undefined

这让我认为“createOrder”方法在触发之前没有等待“readOrder”解析...

如何使用 native Promises 和方法链接使“createOrder”等待 Promise 解析？

Answer 1

要得到类似的东西:

newCook.readOrder().createOrder()

如果每个方法仍然返回原始对象(对于常规链接)，那么您可以执行类似于 jQuery 对动画所做的操作。它允许这样的事情:

$("someSelector").slideDown(500).fade(500);

其中 .fade(500) 操作只有在 .slideDown(500) 操作完成后才开始执行。两者都是异步的(因此函数立即返回)。

它的工作方式是创建一组可以以这种方式在链中使用的方法，并且它们都通过队列工作。对象本身维护一个队列，每个希望参与此自动排序的方法都必须将其自身及其参数排队，而不是直接执行。您可以使用 Promise 监视所有操作，在这种情况下，队列可以只是一个实际的 Promise 链。因此，每个新操作只是将自身添加到 promise 链的末尾。

这是一个使用 ES6 语法的示例:

class Queue {
    constructor() {
        this.init();
    }
    init() {
        let oldP = this.p;
        this.p = Promise.resolve();
        return oldP;
    }
    promise() {
        return this.p;
    }
    // takes a function that returns a promise
    add(fn, ...args) {
        // add this operation into our current promise chain
        this.p = this.p.then(() => {
            return fn.call(...args);
        });
    }
}

class NewCook {
    constructor(cook) {
        this.cook = cook;
        this.q = new Queue();
    }
    // get current promise chain
    promise() {
        return this.q.promise();
    }
    // starts new promise chain, returns prior one
    // this branches a new promise chain so new operations
    // are not affected by the prior state of the promise chain
    // Note that rejects are "latched" so this is required if the previous
    // promise chain rejected.
    init() {
        return this.q.init();
    }
    readOrder() {
        this.q.add(() => {
            return new Promise((resolve, reject) => {
                this.cook.readOrder(resolve);
            });
        });
        return this;
    }
    createOrder(data) {
        this.q.add(() => {
            return new Promise((resolve, reject) => {
                this.cook.createOrder(data, resolve);
            });
        });
        return this;
    }
}

var cook = new Cook();
var newCook = new NewCook(cook);

<小时/>

在现实生活中，我对现有的基于回调的对象 Cook 了解更多，我可能会首先以某种自动化方式“ promise ”该对象，这样我就可以在其上调用 promise 方法直接而不是在每个 NewCook 方法中重复 promisfy 代码。

例如，如果 Cook 回调全部遵循 node.js 调用约定，那么可以使用 Bluebird 的 PromisifyAll 方法自动对它们进行 Promisified。如果它们都遵循其他一些调用约定，我可能会为该样式编写一个通用的 promisify 方法，可以使用该方法，而不是手动 promisify 您想要使用的每个方法。

// promisify the Cook methods using Bluebird
Promise.promisifyAll(Cook);

class NewCook {
    constructor(cook) {
        this.cook = cook;
        this.q = new Queue();
    }
    // get current promise chain
    promise() {
        return this.q.promise();
    }
    // starts new promise chain, returns prior one
    init() {
        return this.q.init();
    }
    readOrder() {
        this.q.add(this.cook.readOrderAsync.bind(this.cook));
        return this;
    }
    createOrder(data) {
        this.q.add(this.cook.createOrderAsync.bind(this.cook), data);
        return this;
    }
}

var cook = new Cook();
var newCook = new newCook(cook);