我正在尝试使用本教程实现“方法链接”( 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 解析?
最佳答案
要得到类似的东西:
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);
关于javascript - 如何在 ProtoType 中使用 Promises *around* 回调进行方法链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47501359/