我如何推迟像Jquery延迟的ES6承诺？

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

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

我正在使用es6,并且想要建立一个延迟确认对话框:

// 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.

当我点击按钮时,它失败了,因为promise没有拒绝和解决方法。

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

未捕获的TypeError:promise.resolve不是函数(...)

2. jQuery working code:

If using jQuery, we can do the below:

如果使用jQuery,我们可以执行以下操作:

// 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:

所以我搜索了延期的ES6版本:

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

But still I got an error:

但我仍然有一个错误:

undefined:1 Uncaught (in promise) Object {}

undefined:1 Uncaught(在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?

那么,我怎样才能从我的诺言创建电话中拿出决心并拒绝行动呢?

5 个解决方案

#1

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

#2

Move jquery statements inside the promise

在承诺中移动jquery语句

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

})

#3

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.

对于那些从谷歌来到这里的人来说,值得一提的是ES6承诺很好,而且我经常使用它们。但是,在某些用例中,延迟模式会导致代码明显减少。在大多数情况下,您应该只使用ES6承诺,但在延迟模式有意义的特殊情况下,它很容易包装ES6承诺。包括一个节点模块在我看来似乎过度杀戮。

function generateDeferredPromise() {
  return (() => {
    let resolve;
    let reject;

    let p = new Promise((res, rej) => {
      resolve = res;
      reject = rej;
    });

    return {
      promise: p,
      reject,
      resolve
    };
  })();
}

#4

Finally found out the point:

终于找到了重点:

In fact the deferred action and es6-deferred package is well done, and works perfectly.

事实上,延迟动作和es6延迟包已经做得很好,而且运行得很好。

import Deferred from 'es6-deferred';

const confirm = function(msg='confirm?') {
    const dfd = Deferred();
    const $dialog = $('#dialog-confirm').show()
    $dialog.find('.msg').text(msg);
    $dialog.find('.btn-yes').click(() => { dfd.resolve(); })
    $dialog.find('.btn-no').click(() => { dfd.reject(); })
    return dfd;
};

// ....    

The actual problem is I got the bellow error:

实际问题是我得到了波纹管错误:

undefined:1 Uncaught (in promise) Object {}

undefined:1 Uncaught(在promise中)Object {}

The real reason is that I called:

真正的原因是我打电话给:

// Another place
confirm('Do you like to delete this item?').then(function() {
    // Do the deletion.
});

Then I click the .btn-no to cancel, at this time, the dfd.reject() is triggered, but at the same time, the promise do not have any catch method to process the reject action yet.

然后我单击.btn-no取消,此时,dfd.reject()被触发,但同时,promise还没有任何catch方法来处理拒绝操作。

So caused this problem.

所以造成了这个问题。

When I added the missed reject function to the call, everything goes well.

当我将错过的拒绝功能添加到通话中时,一切顺利。

Conclusion:

If an ES6 promise was REJECTED with no CATCH phrase registered, it causes problem!

如果ES6承诺被拒绝且没有注册CATCH短语,则会导致问题!

#5

If you have Promise polyfill, just use Promise.resolve();

如果你有Promise polyfill,只需使用Promise.resolve();

In your example:

在你的例子中:

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

$dialog.find('.btn-yes').click(() => { Promise.resolve(); })
$dialog.find('.btn-no').click(() => { Promise.reject(); })