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

时间:2017-05-30 14:14:21

标签: javascript jquery ecmascript-6

我正在尝试使用ecma6承诺重写那个simpel $ .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" );

任何使用新Promise的方式?

问候

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

2 个答案:

答案 0 :(得分:2)

Promise可以通过多种方式编写,具体取决于您的需求,因此这三个示例应该接近您的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')

答案 1 :(得分:0)

jQuery似乎有一些不同的语法来解决多个promises。我能想到的最接近的是使用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 promise API与jQuery提供的不完全匹配。例如,Promise.defer()是deprecated method.。 MDN上有一个延迟示例page here

基于MDN代码段的类实现:

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