{"id":61247,"date":"2024-04-16T11:57:23","date_gmt":"2024-04-16T06:27:23","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=61247"},"modified":"2024-04-16T11:57:23","modified_gmt":"2024-04-16T06:27:23","slug":"when-to-use-promises-and-observables-in-angular","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/when-to-use-promises-and-observables-in-angular\/","title":{"rendered":"When to use Promises and Observables in Angular"},"content":{"rendered":"<p>One of the most confusing scenarios is whether I should use a promise or an observable.<\/p>\n<p>&nbsp;<\/p>\n<p>Have you ever worked with both Promises and Observable? Or maybe you\u2019ve heard of them but don\u2019t know which one to use at what time? To avoid this confusion, we need to understand their differences to pick the right one for our needs. It really depends on your application and which one to use.<\/p>\n<p>Observables and <span id=\"tip_2\">promises both<\/span>\u00a0<span id=\"tip_3\">assist<\/span> us in working\u00a0with asynchronous\u00a0<span id=\"tip_5\">functionality<\/span> in JavaScript (angular).<\/p>\n<p>Let&#8217;s start our discussion on:<\/p>\n<h2>Promises:<\/h2>\n<ul>\n<li>It can emit a single value at a time.<\/li>\n<li>We can&#8217;t cancel the promises.<\/li>\n<li>Are not lazy: execute immediately after creation.<\/li>\n<li>It doesn&#8217;t support operators like map, filter, reduce, retry, retryWhen, and so many other RxJS operators.<\/li>\n<\/ul>\n<p>Note: There are <code>Promise<\/code>\u00a0libraries out there that support cancellation, but ES6\u00a0<code>Promise<\/code>\u00a0doesn&#8217;t so far.<\/p>\n<h2>Checkout some examples<\/h2>\n<p><strong>Emitting value:\u00a0<\/strong><\/p>\n<div>\n<div>\n<pre>  \u00a0 \u00a0 \u00a0 var promise = new Promise(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res(\"Hello To\");\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res(\"Hello The\");\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res(\"Hello New\");\r\n  \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 promise.then(console.log);\r\n<span class=\"token comment\">  \u00a0 \u00a0 \u00a0 \/\/output<\/span>\r\n<span class=\"token comment\">  \u00a0 \u00a0 \u00a0\/\/Hello To --&gt; Promise will emit only single values that's why other two values are not emmited.<\/span><\/pre>\n<\/div>\n<p><strong>Lazy Loading:\u00a0<\/strong><\/p>\n<div>\n<pre>  \u00a0 \u00a0 \u00a0 var promise = new Promise(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Promise start executing...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/In console can see this output before calling promise it will initialized on creation and eagerly load.\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res('Hello....');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Call promise\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 promise.then(console.log);\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Output\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Promise start executing...\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello....<\/pre>\n<div><strong>\u00a0 \u00a0 \u00a0 <\/strong><\/div>\n<div><strong>Asynchronous Promise:\u00a0<\/strong><\/div>\n<div>\n<div><\/div>\n<pre>var promise = new Promise(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Start Executing...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res('Hello...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Execution End...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 promise.then(console.log);\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Output\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Start Executing...\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Execution End...\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello...<\/pre>\n<div>\n<h2>\u00a0 Observable:<\/h2>\n<ul>\n<li>Observables can emit multiple values asynchronously as a stream of data.<\/li>\n<li>We can cancel the observable at any time.<\/li>\n<li>Are lazy: they\u2019re not executed until we subscribe to them using the subscribe() method.<\/li>\n<li>It support operators like map, filter, reduce, retry, retryWhen, and so many other RxJS operators.<\/li>\n<\/ul>\n<h4>\u00a0 \u00a0Checkout some examples:<\/h4>\n<p><strong>Emitting value: <\/strong><\/p>\n<div>\n<div>\n<div>\n<pre>  \u00a0 \u00a0 \u00a0 \u00a0 var observable = new Observable(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello To');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello The');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello New');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 observable.subscribe(console.log);\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \/\/Output --&gt; Observable can emmit multiple values\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello To\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello The\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello New<\/pre>\n<\/div>\n<\/div>\n<p><strong>Lazy Loading: <\/strong><\/p>\n<div>\n<div>\n<div>\n<pre>  \u00a0 \u00a0 \u00a0 \u00a0var observable = new Observable(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"Observable start executing...\"); \/\/ this line will not print untill subscribed\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello....');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 observable.subscribe(console.log); \/\/Whenever subscribe observable then only it will emmit values beacuse it is lazy load.\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Output\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Observable start executing...\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello....<\/pre>\n<\/div>\n<\/div>\n<div><strong>\u00a0 \u00a0 <\/strong><\/div>\n<div><strong>\u00a0 Asynchronous\/synchronous observable: <\/strong><\/div>\n<div><\/div>\n<div>\n<div>\n<pre>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  \u00a0 \u00a0 \/\/Async Observable\r\n var observable = new Observable(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Start Executing...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 setTimeout(() =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello To');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello The');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello New');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }),\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 1000;\r\n\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Execution End...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 observable.subscribe(console.log);\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \r\n             \u00a0 \/\/Output\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Start Executing...\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Execution End...\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello To\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello The\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello New\r\n\r\n\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Sync Observable\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var observable = new Observable(res =&gt; {\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Start Executing...');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello To');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello The');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 res.next('Hello New');\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log('Execution End...');\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 observable.subscribe(console.log);\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\r\n              \/\/Output\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Start Executing...\r\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello To\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello The\r\n  \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Hello New\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Execution End...<\/pre>\n<\/div>\n<h3>Conclusion:<\/h3>\n<p>Observables and Promises are fundamental components of contemporary RxJS and JavaScript applications. While Observables excel at managing numerous asynchronous events over time, Promises are best suited for handling solitary asynchronous tasks. Both are effective technologies for facilitating real-time communication between various application components. Comprehending these ideas enables developers to select the appropriate tool for different asynchronous programming situations, improving the effectiveness and responsiveness of their apps.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>One of the most confusing scenarios is whether I should use a promise or an observable. &nbsp; Have you ever worked with both Promises and Observable? Or maybe you\u2019ve heard of them but don\u2019t know which one to use at what time? To avoid this confusion, we need to understand their differences to pick the [&hellip;]<\/p>\n","protected":false},"author":1764,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":55},"categories":[1439,3429,1185],"tags":[955,5704,5815,5814],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61247"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1764"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=61247"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61247\/revisions"}],"predecessor-version":[{"id":61315,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/61247\/revisions\/61315"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=61247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=61247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=61247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}