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

Question

我正在嘗試使用ecma6 promise重寫那個簡單的$ .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嗎？

問候

目標是在承諾范圍之外解決承諾。

Answer 1

根據您的需求，可以用多種方式編寫Promise，因此這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 promise API與jQuery提供的API不完全匹配。 例如，Promise.defer（）是已棄用的方法。 。 在此MDN 頁面上有一個延遲的示例。

基於MDN代碼段的類實現：

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