[英]Javascript async function composition
我有几个具有不同数量参数的异步函数,每个参数都是最后一个参数。 我希望按顺序打电话。 例如。
function getData(url, callback){
}
function parseData(data, callback){
}
通过使用这个:
Function.prototype.then = function(f){
var ff = this;
return function(){ ff.apply(null, [].slice.call(arguments).concat(f)) }
}
可以像这样调用这些函数,并将输出打印到console.log。
getData.then(parseData.then(console.log.bind(console)))('/mydata.json');
我一直在尝试使用这种语法,并且无法使Then函数正确。 有任何想法吗?
getData.then(parseData).then(console.log.bind(console))('/mydata.json');
罗伯特罗斯曼是对的。 但我愿意纯粹出于学术目的回答。
让我们简化您的代码:
Function.prototype.then = function (callback){
var inner = this;
return function (arg) { return inner(arg, callback); }
}
和:
function getData(url, callback) {
...
}
让我们分析每个函数的类型:
getData
是(string, function(argument, ...)) → null
。 function(argument, function).then
is (function(argument, ...)) → function(argument)
。 这是问题的核心。 当你这样做时:
getData.then(function (argument) {})
它实际上返回一个类型为function(argument)
。 这就是为什么.then
不能叫到它,因为.then
希望被称为在一个function(argument, function)
类型。
你想要做的是包装回调函数。 (在getData.then(parseData).then(f)
的情况下,你想用f
包装parseData
,而不是getData.then(parseData)
的结果。
这是我的解决方案:
Function.prototype.setCallback = function (c) { this.callback = c; }
Function.prototype.getCallback = function () { return this.callback; }
Function.prototype.then = function (f) {
var ff = this;
var outer = function () {
var callback = outer.getCallback();
return ff.apply(null, [].slice.call(arguments).concat(callback));
};
if (this.getCallback() === undefined) {
outer.setCallback(f);
} else {
outer.setCallback(ff.getCallback().then(f));
}
return outer;
}
这看起来像Promise对象的一个很好的用途。 Prom通过为异步计算提供通用接口来提高回调函数的可重用性。 Promises允许您将函数的异步部分封装在Promise对象中,而不是让每个函数都接受一个回调参数。 然后,您可以使用Promise方法(Promise.all,Promise.prototype.then)将异步操作链接在一起。 以下是您的示例翻译方式:
// Instead of accepting both a url and a callback, you accept just a url. Rather than
// thinking about a Promise as a function that returns data, you can think of it as
// data that hasn't loaded or doesn't exist yet (i.e., promised data).
function getData(url) {
return new Promise(function (resolve, reject) {
// Use resolve as the callback parameter.
});
}
function parseData(data) {
// Does parseData really need to be asynchronous? If not leave out the
// Promise and write this function synchronously.
return new Promise(function (resolve, reject) {
});
}
getData("someurl").then(parseData).then(function (data) {
console.log(data);
});
// or with a synchronous parseData
getData("someurl").then(function (data) {
console.log(parseData(data));
});
另外,我应该注意Promise目前没有出色的浏览器支持。 幸运的是,你覆盖,因为有很多polyfills如这一个提供许多相同的功能原生的承诺。
编辑:
或者,不是改变Function.prototype,而是如何实现一个链接方法,该方法将异步函数列表和种子值以及通过每个异步函数生成值的管道作为输入:
function chainAsync(seed, functions, callback) {
if (functions.length === 0) callback(seed);
functions[0](seed, function (value) {
chainAsync(value, functions.slice(1), callback);
});
}
chainAsync("someurl", [getData, parseData], function (data) {
console.log(data);
});
再次编辑:
如果你想要一个更广泛的解决方案,请查看https://github.com/caolan/async之类的内容,上面介绍的解决方案远非强大。
我对这个问题有一些想法,并创建了以下代码,这些代码符合您的要求。 仍然 - 我知道这个概念远非完美。 原因在代码及以下评论。
Function.prototype._thenify = { queue:[], then:function(nextOne){ // Push the item to the queue this._thenify.queue.push(nextOne); return this; }, handOver:function(){ // hand over the data to the next function, calling it in the same context (so we dont loose the queue) this._thenify.queue.shift().apply(this, arguments); return this; } } Function.prototype.then = function(){ return this._thenify.then.apply(this, arguments) }; Function.prototype.handOver = function(){ return this._thenify.handOver.apply(this, arguments) }; function getData(json){ // simulate asyncronous call setTimeout(function(){ getData.handOver(json, 'params from getData'); }, 10); // we cant call this.handOver() because a new context is created for every function-call // That means you have to do it like this or bind the context of from getData to the function itself // which means every time the function is called you have the same context } function parseData(){ // simulate asyncronous call setTimeout(function(){ parseData.handOver('params from parseData'); }, 10); // Here we can use this.handOver cause parseData is called in the context of getData // for clarity-reasons I let it like that } getData .then(function(){ console.log(arguments); this.handOver(); }) // see how we can use this here .then(parseData) .then(console.log)('/mydata.json'); // Here we actually starting the chain with the call of the function // To call the chain in the getData-context (so you can always do this.handOver()) do it like that: // getData // .then(function(){ console.log(arguments); this.handOver(); }) // .then(parseData) // .then(console.log).bind(getData)('/mydata.json');
问题和事实:
至少对于第一个问题,你可以解决它,而不是在相同的上下文中调用链中的下一个函数,而是将队列作为参数提供给下一个函数。 我稍后会尝试这种方法。 这也许可以解决第3点提到的冲突。
对于其他问题,您可以在注释中使用示例代码
PS:当您运行剪切时,请确保您的控制台已打开以查看输出
PPS:欢迎对此方法发表评论!
问题是then
返回当前函数的包装器,并且连续的链式调用将再次包装它,而不是包装先前的回调。 实现的方法之一就是使用关闭和覆盖then
在每次调用:
Function.prototype.then = function(f){ var ff = this; function wrapCallback(previousCallback, callback) { var wrapper = function(){ previousCallback.apply(null, [].slice.call(arguments).concat(callback)); }; ff.then = wrapper.then = function(f) { callback = wrapCallback(callback, f); //a new chained call, so wrap the callback return ff; } return wrapper; } return ff = wrapCallback(this, f); //"replace" the original function with the wrapper and return that } /* * Example */ function getData(json, callback){ setTimeout( function() { callback(json) }, 100); } function parseData(data, callback){ callback(data, 'Hello'); } function doSomething(data, text, callback) { callback(text); } function printData(data) { console.log(data); //should print 'Hello' } getData .then(parseData) .then(doSomething) .then(printData)('/mydata.json');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.