CODEWITHSUNDEEP
javascriptpromiseecmascript-6
Assaf Shemesh
Assaf Shemesh

Reputation: 2156

progress notifications in ECMAScript Promise

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 frameworks (Q promise library, for ex.) allows that.

How can we adopt some kind of progress indication most elegantly?

Or should we migrate to a different framework? (I don't know how to estimate the effort of the latter)

Upvotes: 32

Views: 16438

Answers (2)

Singuan Iap
Singuan Iap

Reputation: 31

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)
})

Upvotes: 1

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276306

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
});

Upvotes: 27

Related Questions