Fortschrittsbenachrichtigungen in ECMAScript Promise

Question

Wir verwenden ECMAScript 6 promises.

Wir müssen Fortschrittsbenachrichtigungen an den Endbenutzer implementieren (dies ist reine UX-Anforderung). Ich weiß, dass andere Versprechen Frameworks (Q promise Bibliothek, z. B.) erlaubt, dass.

Wie können wir eine Art Fortschrittsanzeige annehmen elegant?

Oder sollten wir in ein anderes Framework migrieren? (Ich weiß nicht, wie man den Aufwand des Letzteren abschätzen kann)

Answer 1

ES2015 Versprechen werden nie Progression haben. Versprechen stellen einen einzigartigen Wert dar. Wenn Sie mehrere Werte haben möchten, können Sie in Observables schauen - oder den Fortschritt in die Funktion "Versprechen zurückgeben" einfügen.

Den Fortschritt auf die Funktion zum Zurückgeben von Versprechen zu setzen ist ziemlich einfach. Grundsätzlich nehmen Sie einen Callback als Parameter für die Funktion und rufen ihn immer dann auf, wenn eine Fortschrittsbenachrichtigung erfolgen soll.

Hier ist ein Text aus unserem Guide zu bluebird angepasst:

Progression hat composability und Verkettungs Probleme mit APIs, die Versprechen Progression Handler verwenden. Da sich andere Bibliotheken von der Progressions-API entfernen, da sie mit Versprechungen wenig zu tun hat, wird Bluebird auch dies tun. Das Implementieren des allgemeinen Anwendungsfalles von Fortschrittsbalken kann unter Verwendung eines Musters ähnlich zu IProgress in C# erreicht werden.

jQuery Verwendung vor:

Promise.resolve($.get(...)) 
    .progressed(function() { 
     // ... 
    }) 
    .then(function() { 
     // ... 
    }) 
    .catch(function(e) { 
     // ... 
    }) 

Mit jQuery nach:

Promise.resolve($.get(...).progress(function() { 
     // ... 
    })) 
    .then(function() { 
     // ... 
    }) 
    .catch(function(e) { 
     // ... 
    }) 

Implementierung von allgemeinem Fortschritt Schnittstellen wie in C#:

function returnsPromiseWithProgress(progressHandler) { 
    return doFirstAction().tap(function() { 
     progressHandler(0.33); 
    }).then(doSecondAction).tap(function() { 
     progressHandler(0.66); 
    }).then(doThirdAction).tap(function() { 
     progressHandler(1.00); 
    }); 
} 

returnsPromiseWithProgress(function(progress) { 
    ui.progressbar.setWidth((progress * 200) + "px"); // update with on client side 
}).then(function(value) { // action complete 
    // entire chain is complete. 
}).catch(function(e) { 
    // error 
});