Chaining async Promises with 1 resolve and 1 reject?

Question

I have a function that has to do something async, in a few steps. At every step it can fail. It might fail before step 1, so you might know the result immediately, or after 1.5 sec. When it fails, it has to run a callback. Idem when it succeeds. (I'm using when on purpose, because it's not just if: the timing is important.)

I thought Promises are perfect, because async and they resolve only once, but it still has a problem: when does it fail? I can explictly see when it succeeds (after the last step), but when does it fail? Inside/before any step.

This is what I have now, but that's ridiculous:

function clickSpeed() {
    return new Promise(function(resolve, reject) {
        if ( test('one') ) {
            return setTimeout(function() {
                if ( test('two') ) {
                    return setTimeout(function() {
                        if ( test('three') ) {
                            return setTimeout(function() {
                                console.log('resolving...');
                                resolve();
                            }, 500);
                        }
                        console.log('rejecting...');
                        reject();
                    }, 500);
                }
                console.log('rejecting...');
                reject();
            }, 500);
        }
        console.log('rejecting...');
        reject();
    });
}

(test() randomly passes or fails a step.)

Fiddle here: http://jsfiddle.net/rudiedirkx/zhdrjjx1/

I'm guessing the solution is to chain promises, which resolves or rejects every step..? Maybe. Is that a thing? How would I implement that?

Could this work for an unknown number of steps?

Answer 1

You could rewrite your solution to promises quite literally:

function sleep(ms) {
    return new Promise(function(resolve) {
        setTimeout(resolve, ms);
    });
}

function clickSpeed() {
    if ( test('one') ) {
        return sleep(500).then(function() {
            if ( test('two') ) {
                return sleep(500).then(function() {
                    if ( test('three') ) {
                        return sleep(500).then(function() {
                            console.log('resolving...');
                        });
                    }
                    console.log('rejecting...');
                    return Promise.reject();
                });
            }
            console.log('rejecting...');
            return Promise.reject();
        });
    }
    console.log('rejecting...');
    return Promise.reject();
}

However, that's still quite ugly. I'd rather reverse the if/elses as a first step:

function clickSpeed() {
    if (!test('one')) {
        console.log('rejecting...');
        return Promise.reject();
    }
    return sleep(500).then(function() {
        if (!test('two')) {
            console.log('rejecting...');
            return Promise.reject();
        }
        return sleep(500).then(function() {
            if (!test('three')) {
                console.log('rejecting...');
                return Promise.reject();
            }
            return sleep(500).then(function() {
                console.log('resolving...');
            });
        });
    });
}

But then we also can unnest these callbacks. It's usually not possible when you're doing branching with if, but in this case the only alternative result is a rejection, which is like throwing, and won't execute the chained then callbacks.

function clickSpeed() {
    return Promise.resolve() // only so that the callbacks look alike, and to use throw
    .then(function() {
        if (!test('one')) {
            console.log('rejecting...');
            throw;
        }
        return sleep(500);
    }).then(function() {
        if (!test('two')) {
            console.log('rejecting...');
            throw;
        }
        return sleep(500)
    }).then(function() {
        if (!test('three')) {
            console.log('rejecting...');
            throw;
        }
        return sleep(500);
    }).then(function() {
        console.log('resolving...');
    });
}

Now you could make those tests throw the exception itself so you don't need the if any more, and you could move the console.log('rejecting...'); statement in a .catch().

And while I guess it's only your example where all steps look alike, you could easily create the promise chain dynamically from a list as well:

function clickSpeed() {
    return ['one', 'two', 'three'].reduce(function(p, cur) {
        return p.then(function() {
            if (!test(cur))
                throw new Error('rejecting...');
            else
                return sleep(500);
        });
    }, Promise.resolve());
}

Answer 2

First, let's rearrange the opening statement very subtly to reflect a more typical and more appropriate use of promises.

Instead of :

a function that has to do something async, in a few steps

let's say :

a function that has to do something in a few async steps

Thus, we might first choose to write a function that executes a promise chain and returns its resultant promise :

function doAnAsyncSequence() {
    return Promise.resolve()
    .then(function() {
        doSomethingAsync('one');
    })
    .then(function() {
        doSomethingAsync('two');
    })
    .then(function() {
        doSomethingAsync('three');
    });
}

And, for the sake of demonstration, we can write doSomethingAsync() such that it returns a promise that has a 50:50 chance of being resolved:rejected (which is more useful here than a delay) :

function doSomethingAsync(x) {
    return new Promise(function(resolve, reject) {
        if(Math.random() > 0.5 ) {
            resolve(x);
        } else {
            reject(x); // importantly, this statement reports the input argument `x` as the reason for failure, which can be read and acted on where doSomethingAsync() is called.
        }
    });
}

Then, the central part of the question :

when does it fail?

might be rephrased :

when did it fail?

which is a more realistic question because we would typically be calling asynchronous process(es) over which we have little influence (they might run on some server somewhere else in the world), and which we hope will succeed but may randomly fail. If so, our code (and/or our end-users) would like to know which one failed, and why.

In the case of doAnAsyncSequence(), we can do that as follows :

doAnAsyncSequence().then(function(result) {
    console.log(result); // if this line executes, it will always log "three", the result of the *last* step in the async sequence.
}, function(reason) {
    console.log('error: ' + reason);
});

Although there is no console.log() statement in either doAnAsyncSequence() or doSomethingAsync() :

• on success, we can observe the overall result (which will always be "three" in this example).
• on error, we know exactly which of the async steps caused the process to fail ("one", "two" or "three").

Try it out

---

So that's the theory.

To answer the specific question (as I understand it) ...

for doSomethingAsync(), write :

function test_(value, delay) {
    return new Promise(function(resolve, reject) {
        //call your own test() function immediately
        var result = test(value);
        // resolve/reject the returned promise after a delay
        setTimeout(function() {
            result ? resolve() : reject(value);
        }, delay);
    });
}

for doAnAsyncSequence(), write :

function clickSpeed() {
    var delayAfterTest = 500;
    return Promise.resolve()
    .then(function() {
        test_('one', delayAfterTest);
    })
    .then(function() {
        test_('two', delayAfterTest);
    })
    .then(function() {
        test_('three', delayAfterTest);
    });
}

And call as follows :

clickSpeed().then(function() {
    console.log('all tests passed');
}, function(reason) {
    console.log('test sequence failed at: ' + reason);
});

Answer 3

Since your timing is monotone, and your "work" is predefined, I'd refactor the code to utilize setInterval() with a context to keep track of required "work" or "step". In fact, you don't even have to use a Promise when doing so, although you still can, and if you want to further chain handlers it's a good idea:

function clickSpeed(resolve, reject) {
  var interval = setInterval(function(work) {
    try {
      var current = work.shift();
      if(!test(current)) { // Do current step's "work"
        clearInterval(interval); // reject on failure and clear interval
        console.log('rejecting...', current);
        reject();
      }
      else if(!work.length) { // If this was the last step
        clearInterval(interval); // resolve (success!) and clear interval
        console.log('resolving...');
        resolve();
      }
    }
    catch(ex) { // reject on exceptions as well
      reject(ex);
      clearInterval(interval);
    }
  }, 500, ['one', 'two', 'three']); // "work" array
}

The function can either be called "directly" with resolve/reject handlers, or used as the argument of the Promise constructor.

See full example in modified JSFiddle.

---

To address Bergi's too much boilerplate comment, code can be written more concisely, without logging:

function clickSpeed(resolve, reject) {
    function done(success, val) {
        clearInterval(interval);
        success ? resolve(val) : reject(val);
    }

    var interval = setInterval(function(work) {
        try {
            if(test(work.shift()) || done(false)) {
                work.length || done(true);
            }
        }
        catch(ex) { // reject on exceptions as well
            done(false, ex);
        }
    }, 500, ['one', 'two', 'three']); // "work" array
}