使用reduce和promise顺序执行数组中的函数

Question

I have an array of functions

var functionArray = [function1, function2, function3];

The functions looks like this. All are identical

var function2 = (value, callback) => {
    setTimeout(() => {
        value++;
        callback(null, value);
    }, 2000);
}

I want to execute these functions sequentially using reduce and promises . But the below code is not working. I am not able to get my head around it.

var wrapper = (functionName, value) => {

    return new Promise((resolve, reject) => {
        functionName(value, (error, returnedValue) => {
            console.log(returnedValue);
            resolve(returnedValue);
        });
    });
}

var execute = function () {
    return functionArray.reduce((promise, currentFunction) => {
        return promise.then((value = 10) => {
            wrapper(currentFunction, value);
        });
    }, Promise.resolve());
};

When I invoke execute the value 11 gets printed three times immediately. Am I missing something here?

Live Snippet:

 var function1 = (value, callback) => { setTimeout(() => { value++; callback(null, value); }, 2000); } var function2 = (value, callback) => { setTimeout(() => { value++; callback(null, value); }, 2000); } var function3 = (value, callback) => { setTimeout(() => { value++; callback(null, value); }, 2000); } var wrapper = (functionName, value) => { return new Promise((resolve, reject) => { functionName(value, (error, returnedValue) => { console.log(returnedValue); resolve(returnedValue); }); }); } var execute = function () { return functionArray.reduce((promise, currentFunction) => { return promise.then((value = 10) => { wrapper(currentFunction, value); }); }, Promise.resolve()); }; var functionArray = [function1, function2, function3]; execute();

Answer 1

The problem is here ( *** ):

return functionArray.reduce((promise, currentFunction) => {
    return promise.then((value = 10) => {
        wrapper(currentFunction, value); // ***
    });
}, Promise.resolve());

You're not returning the promise that wrapper produces, so the result of the then callback is undefined , and so the promise you're calling it on isn't resolved to that new promise. So wrapper is called three times one right after another, and two seconds later, the timeouts occur. It also accounts for why you get 11 three times: Subsequent calls don't see the result of the previous one (they see undefined ), so you're getting the default of 10 for value each time.

If you return the promise, either:

return functionArray.reduce((promise, currentFunction) => {
    return promise.then((value = 10) => {
        return wrapper(currentFunction, value);
// −−−−−^^^^^^
    });
}, Promise.resolve());

or:

return functionArray.reduce((promise, currentFunction) => {
    return promise.then((value = 10) => wrapper(currentFunction, value));
//−−^^^^^^
}, Promise.resolve());

...it spreads them out as expected, and they see and use the return value of the previous call:

 var function1 = (value, callback) => { setTimeout(() => { value++; callback(null, value); }, 2000); } var function2 = (value, callback) => { setTimeout(() => { value++; callback(null, value); }, 2000); } var function3 = (value, callback) => { setTimeout(() => { value++; callback(null, value); }, 2000); } var wrapper = (functionName, value) => { return new Promise((resolve, reject) => { functionName(value, (error, returnedValue) => { console.log(returnedValue); resolve(returnedValue); }); }); } var execute = function () { return functionArray.reduce((promise, currentFunction) => { return promise.then((value = 10) => { return wrapper(currentFunction, value); }); }, Promise.resolve()); }; var functionArray = [function1, function2, function3]; execute();

Answer 2

the return values are not correct.

Parameter is always 10.

  return wrapper(currentFunction, value, timeout);

See:

https://jsfiddle.net/js1n6xL3/3/

Maybe this can help you too: https://gist.github.com/anvk/5602ec398e4fdc521e2bf9940fd90f84