Choose Promise or Observable when working with Angular?

1

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

Share This:

1 Comment

  1. Pingback: Choose Promise or Observable when working with Angular? - Web Design Tips

Leave A Reply

%d bloggers like this:

Powered by FrontNet