Ecma6承诺:如何使用Ecma6承诺重写jquery $.when？

Question

我试图用ecma6承诺重写辛佩尔$.when

var d1 = $.Deferred();
var d2 = $.Deferred();

$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 ); // "Fish"
    console.log( v2 ); // "Pizza"
});

d1.resolve( "Fish" );
d2.resolve( "Pizza" );

有什么办法利用新的承诺吗？

问候

我们的目标是解决承诺范围之外的承诺。

Answer 1

可以通过多种方式编写承诺，这取决于您的需要，因此这3个示例应该接近您的jQuery示例：

​

var d1 = (v)=>new Promise(r=>r(v))
var d2 = (v)=>new Promise(r=>r(v))
var dd1 = d1('Fish')
var dd2 = d2('Pizza')

Promise.all([dd1, dd2]).then(( v )=>{
    console.log( v[0]+', '+v[1] );
});

//or

var d1 = new Promise(r=>r('Fish'))
var d2 = new Promise(r=>r('Pizza'))

Promise.all([d1, d2]).then(( v )=>{
    console.log( v[0]+', '+v[1] );
});

//or

var d1 = Promise.resolve('Fish')
var d2 = Promise.resolve('Pizza')

Promise.all([d1, d2]).then(( v )=>{
    console.log( v[0]+', '+v[1] );
});

​

好的，下面是如何从外部解决这个问题：

​

var reolveMe = [];

var d1 = new Promise(r=>reolveMe.push(r))
var d2 = new Promise(r=>reolveMe.push(r))

Promise.all([d1, d2]).then(( v )=>{
    console.log( v[0]+', '+v[1] );
});

reolveMe[0]('a')
reolveMe[1]('b')

//or more OOP

function myPromise() {
  var myResolve;
  this.promise = new Promise(r=>myResolve=r)
  this.resolve = myResolve;
}

var d1 = new myPromise()
var d2 = new myPromise()

Promise.all([d1.promise, d2.promise]).then(( v )=>{
    console.log( v[0]+', '+v[1] );
});

d1.resolve('a')
d2.resolve('b')

​

Answer 2

jQuery的时间似乎有几个不同的语法来解决多个承诺。我能想到的最接近的就是使用Promise.all。

let p1 = new Promise((resolve) => resolve('Pizza'));
let p2 = new Promise((resolve) => resolve('Fish'));

Promise.all([p1, p2]).then((values) => {
 console.log(values[0]); //Pizza
 console.log(values[1]); //Fish
});

JS承诺API与jQuery提供的内容不完全匹配。例如，Promise.defer()是一个不推荐的方法。在MDN 这一页上有一个延迟的示例。

基于MDN片段的类实现：

class Deferred {
  constructor() {
   this.promise = new Promise((resolve, reject) => {
     this.resolve = resolve;
     this.reject = reject
   });
  }
 }