As you all 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.
const p = new Promise ( ( resolve , reject ) = > {
if ( true ) {
resolve ( 'Ket qua' ) ;
} else {
reject ( 'Co loi' ) ;
}
} ) ;
p . then ( result = > {
console . log ( result ) ;
} ) . catch ( error = > {
console . log ( error ) ;
} ) ;
// => Ket qua
- With Observable, it can return multiple values simultaneously.
const ob = rxjs . Observable . create ( ( observer ) = > {
observer . next ( 'Ket qua 1' ) ;
observer . next ( 'Ket qua 2' ) ;
observer . next ( 'Ket qua 3' ) ;
} ) ;
ob . subscribe ( ( result ) = > {
console . log ( result ) ;
} ) ;
// => Ket qua 1
// => Ket qua 2
// => Ket qua 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.
const ob = rxjs . Observable . create ( ( observer ) = > {
observer . next ( 'Ket qua 1' ) ;
setTimeout ( ( ) = > {
observer . next ( 'Ket qua 2' ) ;
} , 5000 ) ; // Return "Ket qua 2" after 5s
} ) ;
const sub = ob . subscribe ( ( result ) = > {
console . log ( result ) ;
} ) ;
setTimeout ( ( ) = > {
sub . unsubscribe ( ) ;
console . log ( 'Cancel request' ) ;
} , 2000 ) ; // Cancel request after 2s
// => Ket qua 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.
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!
Build web application with Python + Flask Framework + Angular2 + DynamoDB – Part 1 Why Angular made me want to quit programming
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.
const p = new Promise ( ( resolve , reject ) = > {
if ( true ) {
resolve ( 'Ket qua' ) ;
} else {
reject ( 'Co loi' ) ;
}
} ) ;
p . then ( result = > {
// Handle result
result = 'Gia tri tra ve la: ' + result ;
console . log ( result ) ;
} ) . catch ( error = > {
console . log ( error ) ;
} ) ;
// => Gia tri tra ve la: Ket qua
- With Observable, it provides a lot of powerful operators for processing results before returning.
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.
Source: techtalk.vn
The post Choose Promise or Observable when working with Angular? appeared first on FrontNet Blog.