How do I defer an ES6 promise like jquery Deferred?
<h3>1. Using es6 promise, but the syntax is incorrect.</h3>

<p>I'm using es6, and want to make a deferred confirm dialog:</p>

<pre><code>// First, create an empty promise:
let promise = new Promise((resolve, reject) =&gt; {})

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

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

<p>When I clicked the button, it failed, because the promise does not have the <code>reject</code> and <code>resolve</code> method.</p>

<blockquote>
  <p>Uncaught TypeError: promise.resolve is not a function(…)</p>
</blockquote>

<h3>2. jQuery working code:</h3>

<p>If using jQuery, we can do the below:</p>

<pre><code>// 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(() =&gt; { dfd.resolve(); })
$dialog.find('.btn-no').click(() =&gt; { dfd.reject(); })
</code></pre>

<h3>3. Try to find a deferred interface for es6.</h3>

<p>So I searched for an <strong>ES6 EDITION</strong> of deferred:</p>

<p><a href="https://github.com/seangenabe/es6-deferred" rel="noreferrer">https://github.com/seangenabe/es6-deferred</a></p>

<p>But still I got an error:</p>

<blockquote>
  <p>undefined:1 Uncaught (in promise) Object {}</p>
</blockquote>

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

<p><a href="https://github.com/seangenabe/es6-deferred/blob/master/deferred.js" rel="noreferrer">https://github.com/seangenabe/es6-deferred/blob/master/deferred.js</a></p>

<p>The same strategy if I do:</p>

<pre><code>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(() =&gt; { dfd.resolve(); })
$dialog.find('.btn-no').click(() =&gt; { dfd.reject(); })
</code></pre>

<p>So, how can I pull out the <code>resolve</code> and <code>reject</code> action out of my promise creation call?</p>