progress notifications in ECMAScript Promise

Question

We\'re using ECMAScript 6 promises.

We need to implement progress notifications to the end-user (this is pure UX requirement). I know that other promise

Answer 1

Since only specific instance of promise generates progress, we can monkey patch it on demand, like this:

   function reparse(){
        let notify
        let promise = new Promise(async(resolve,reject)=>{
            instanceOfjQueryDeferred.done(()=>{
                resolve(100)
            }).progress((progress)=>{
                notify(progress)
            })
        })
        // here is the monkey patch
        promise.progress  = (handler)=>{
            notify = handler
            return promise
        }
        return promise
    }

And use it like this:

reparse().progress((p)=>{
    console.log('progress',p)
}).then((progress)=>{
    console.log('done',progress)
})

Answer 2

ES2015 promises will never have progression. Promises represent a singular eventual value. If you want multiple values you can look into observables - or put the progress on the promise returning function.

Putting the progress on the promise returning function is pretty easy. Basically you take a callback as a parameter to the function and call it whenever a progress notification should happen.

Here is some text adapted from our guide at bluebird:

Progression has composability and chaining issues with APIs that use promise progression handlers. As other libraries move away from the progression API since it really has little to do with promises, so will Bluebird. Implementing the common use case of progress bars can be accomplished using a pattern similar to IProgress in C#.

Using jQuery before:

Promise.resolve($.get(...))
    .progressed(function() {
        // ...
    })
    .then(function() {
        // ...
    })
    .catch(function(e) {
        // ...
    })

Using jQuery after:

Promise.resolve($.get(...).progress(function() {
        // ...
    }))
    .then(function() {
        // ...
    })
    .catch(function(e) {
        // ...
    })

Implementing general progress interfaces like in C#:

function returnsPromiseWithProgress(progressHandler) {
    return doFirstAction().tap(function() {
        progressHandler(0.33);
    }).then(doSecondAction).tap(function() {
        progressHandler(0.66);
    }).then(doThirdAction).tap(function() {
        progressHandler(1.00);
    });
}

returnsPromiseWithProgress(function(progress) {
    ui.progressbar.setWidth((progress * 200) + "px"); // update with on client side
}).then(function(value) { // action complete
   // entire chain is complete.
}).catch(function(e) {
    // error
});