Ecma6承諾：如何使用Ecma6承諾重寫jquery $ .when？

Question

我試圖用ecma6承諾重寫simpel $。當

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"); 

任何方式使用新的承諾？

問候

的目標是要解決OUTSIDE承諾的範圍的承諾。

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

OK，所以這裏是如何從外部解決它：

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。我能想到的最接近的就是使用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（）是一個deprecated method.。該MDN page here上有一個延遲示例。

基礎上，MDN類實現片段：

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