As you know, and many articles have talked about this issue, Promise and Observable are the techniques used to process data asynchronously in javascript in general and Angular in particular. But what are the differences between these two guys? Which guy should I use? … Such questions have a lot of people asking, and in this article, I would like to give some personal analysis to choose the most suitable one.
1. Compare
Ability to return multiple results
- For Promise, after each data processing, it can only return a single value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const p = new Promise ((resolve, reject) => { if (true) { resolve ('Ket through'); } else { reject ('Co loi'); } }); p.then (result => { console.log (result); }). catch (error => { console.log (error); }); // => Go through |
- With Observable, it can return multiple values simultaneously.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const ob = rxjs.Observable.create ((observer) => { observer.next ('Ket 1'); observer.next ('Ket 2'); observer.next ('Ket 3'); }); ob.subscribe ((result) => { console.log (result); }); // => Ket through 1 // => Ket through 2 // => Ket through 3 |
Cancellation capability
- For Promise, when we have created a request, there is no way to cancel that request.
- Observable, it is possible to cancel the created request.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const ob = rxjs.Observable.create ((observer) => { observer.next ('Ket 1'); setTimeout (() => { observer.next ('Ket 2'); }, 5000); // Return "Ket over 2" after 5s }); const sub = ob.subscribe ((result) => { console.log (result); }); setTimeout (() => { sub.unsubscribe (); console.log ('Cancel request'); }, 2000); // Cancel request after 2s // => Ket through 1 // => Cancel request |
Retry ability
- Promise cannot retry when the error handling process occurs, or it must be thanks to 3rd party support tips and libraries.
- The Observable provides retry operators, retryWhen makes it easy to retry requests.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
const source = rxjs.of (1,2,3,4,5); const retry = source.pipe ( rxjs.operators.mergeMap (val => { if (val> 3) { return rxjs.throwError ('Error!'); } return rxjs.of (val); }), rxjs.operators.retry (2) ); retry.subscribe ((result) => { console.log (result); }, err => { console.log (err); }); // => 1 // => 2 // => 3 // End first run // => 1 // => 2 // => 3 // End first retry // => 1 // => 2 // => 3 // End second retry // => Error! |
Ability to process results before returning
- With Promise, because the feature only returns a single result, the processing of the results can be done in the step after receiving the results .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const p = new Promise ((resolve, reject) => { if (true) { resolve ('Ket through'); } else { reject ('Co loi'); } }); p.then (result => { // Handle result result = 'Test result is:' + result; console.log (result); }). catch (error => { console.log (error); }); // => Family knowledge: la Ket |
- With Observable, it provides a lot of powerful operators for processing results before returning.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const source = rxjs.of (1,2,3,4,5); const ob = source.pipe ( rxjs.operators.map (val => { // Handle result return val * 2; }) ); ob.subscribe ((result) => { console.log (result); }, err => { console.log (err); }); // => 2 // => 4 // => 6 // => 8 // => 10 |
Refer to more operators here: https://www.learnrxjs.io/operators
2. Conclusion
So you can see the Observable has proved its strength better than Promise so my choice is to use Observable in Angular. It’s also no coincidence that Angular chose the Observable to develop it right! Hopefully, through this sketchy article, you also have your own evaluation of these two guys and have the right choice when working with Angular.