CODEWITHSUNDEEP
javascriptjqueryecmascript-6deferredes6-promise
Alfred Huang
Alfred Huang

Reputation: 18235

How do I defer an ES6 promise like jquery Deferred?

1. Using es6 promise, but the syntax is incorrect.

I'm using es6, and want to make a deferred confirm dialog:

// First, create an empty promise:
let promise = new Promise((resolve, reject) => {})

// Then, show the dialog:
let $dialog = $('#dialog-confirm').show();

// FAIL: I want to trigger the promise resolver, but failed.
$dialog.find('.btn-yes').click(() => { promise.resolve(); })
$dialog.find('.btn-no').click(() => { promise.reject(); })

When I clicked the button, it failed, because the promise does not have the reject and resolve method.

Uncaught TypeError: promise.resolve is not a function(…)

2. jQuery working code:

If using jQuery, we can do the below:

// First, create an empty promise:
var dfd = $.Deferred();
var promise = dfd.promise();

// Then, show the dialog:
var $dialog = $('#dialog-confirm').show();

// SUCCESS: jQuery deferred works
$dialog.find('.btn-yes').click(() => { dfd.resolve(); })
$dialog.find('.btn-no').click(() => { dfd.reject(); })

3. Try to find a deferred interface for es6.

So I searched for an ES6 EDITION of deferred:

https://github.com/seangenabe/es6-deferred

But still I got an error:

undefined:1 Uncaught (in promise) Object {}

In fact, the code is just keep the inner resolve and reject function to outside using closure:

https://github.com/seangenabe/es6-deferred/blob/master/deferred.js

The same strategy if I do:

let dfd = {};

let $dialog = $('#dialog-confirm').show();

let promise = (function() {
    return dfd.promise = new Promise(function(resolve, reject) {
        dfd.resolve = resolve;
        dfd.reject = reject;
    });
})();

// FAIL: still not working.
$dialog.find('.btn-yes').click(() => { dfd.resolve(); })
$dialog.find('.btn-no').click(() => { dfd.reject(); })

So, how can I pull out the resolve and reject action out of my promise creation call?

Upvotes: 10

Views: 13786

Answers (3)

aashtonk
aashtonk

Reputation: 849

For those of you getting here from Google its worth mentioning that ES6 promises are good and I use them a lot. However, there are use cases where the deferred pattern results in significantly less code. In most cases you should likely just use the ES6 promises but in those special cases where the deferred pattern makes sense then its easy enough to wrap an ES6 promise. Including a node module seems like over kill in my mind.

function generateDeferredPromise() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    [resolve, reject] = [res, rej];
  });
  return {promise, reject, resolve};
}

Upvotes: 32

Disfigure
Disfigure

Reputation: 740

var Deferred = require('es6-deferred');
var d = new Deferred(
     (resolve, reject) => {
         // Process your Async or sync process here and
         // call resolve() and pass your data as argument when
         // it is successful
         // same for error case, just call reject() instead.
     }
);

d.then(
    (res) => {
    // res is your data passed into the resolve method the deferred promise
    // Handle your click here
    }, (err) => {
    // err is your data or error passed into the reject method
    // Handle your click here
  }
);

Upvotes: 0

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Move jquery statements inside the promise

let promise = new Promise((resolve, reject) => {
 let $dialog = $('#dialog-confirm').show();
$dialog.find('.btn-yes').click(() => { resolve(); })
$dialog.find('.btn-no').click(() => { reject(); })

})

Upvotes: 1

Related Questions