{"id":7143,"date":"2022-02-24T12:52:30","date_gmt":"2022-02-24T07:22:30","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7143"},"modified":"2022-02-24T12:53:48","modified_gmt":"2022-02-24T07:23:48","slug":"difference-between-observables-and-promises","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/","title":{"rendered":"Difference Between Observables and Promises"},"content":{"rendered":"

For dealing with adaptive data in Angular, we can choose either Promise or Observable. Both get and post methods of HTTP and HttpClient return Observable and it can be converted into Promise using toPromise() method. So, what’s the distinction when they’re both dealing with adaptive data?<\/p>\n

What actually is the difference?<\/strong><\/p>\n

Promise generates a mono value, whereas Observable generates a variable. So, while addressing an HTTP request, Promise can only manage a single response for the same request; however, if there are numerous responses to the same request, we must use Observable. Yes, multiple responses to the same request can be handled by Observable.
\nLet\u2019s implement this with an example.<\/p>\n

Promise<\/strong><\/p>\n

const promise = new Promise((data) =>\r\n{ data(1);\r\ndata(2);\r\ndata(3); })\r\n.then(element => console.log(\u2018Promise \u2018 + element));<\/pre>\n
Output<\/strong><\/p>\n
Promise 1<\/p>\n
Explore how to use Resolve -Promises in Angular 2. Resolve is a potent tool for optimizing the user experience when switching among pages in your app. When compared to extracting information within the component, it also makes the component’s code much neater.<\/p>\n
Observable<\/strong><\/p>\n
const observable = new Observable((data) => {\r\ndata.next(1);\r\ndata.next(2);\r\ndata.next(3);\r\n}).subscribe(element => console.log('Observable ' + element));<\/pre>\n
Output<\/strong><\/p>\n
Observable 1
\nObservable 2
\nObservable 3<\/p>\n
So, in the above code snippet, I have created promises and observables of Promise and Observable type respectively. But, the promise returns the very first value and ignores the remaining values whereas Observable returns all the values and prints 1, 2, 3 in the console.
\nThe promise is not lazy while Observable is lazy. Observables are lazy in nature and do not return any value until we subscribe.<\/p>\n
home.component.ts (Observable)<\/strong><\/p>\n
getMenu() {\r\nthis.homeService.getFoodItem();\r\n}\r\n}<\/pre>\n
In the above example, we are not subscribing to the observable, so we do not receive the data and even there would be no network call for this service.<\/p>\n
home.component.ts (Observable)<\/strong><\/p>\n
getMenu() {\r\nthis.homeService.getFoodItem().subscribe((data => {\r\nthis.foodItem = data;\r\n}),\r\nerror => console.log(error));\r\n}\r\n}<\/pre>\n
Here, we have subscribed to our Observable, so it will simply return the data. But Promise returns the value regardless of the then() method.<\/p>\n
home.component.ts (Promise)<\/strong><\/p>\n
getMenu() {\r\nthis.homeService.getFoodItem()\r\n.then((data) => {\r\nthis.foodItem = data;\r\n});\r\n}<\/pre>\n
Observable is cancellable in nature by invoking the unsubscribe() method, but Promise is not cancellable in nature.<\/p>\n","protected":false},"excerpt":{"rendered":"
For dealing with adaptive data in Angular, we can choose either Promise or Observable. Both get and post methods of HTTP and HttpClient return Observable and it can be converted into Promise using toPromise() method. So, what’s the distinction when they’re both dealing with adaptive data? What actually is the difference? Promise generates a mono […]<\/p>\n","protected":false},"author":1,"featured_media":7144,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[404],"tags":[396,400,401,722,730,723],"class_list":["post-7143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-angular-4","tag-angular-5","tag-blog","tag-blogger","tag-blogging"],"yoast_head":"\nDifference Between Observables and Promises - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Difference Between Observables and Promises - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"For dealing with adaptive data in Angular, we can choose either Promise or Observable. Both get and post methods of HTTP and HttpClient return Observable and it can be converted into Promise using toPromise() method. So, what’s the distinction when they’re both dealing with adaptive data? What actually is the difference? Promise generates a mono […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-24T07:22:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T07:23:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/02\/Difference-Between-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Difference Between Observables and Promises\",\"datePublished\":\"2022-02-24T07:22:30+00:00\",\"dateModified\":\"2022-02-24T07:23:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/\"},\"wordCount\":315,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Difference-Between.png\",\"keywords\":[\"angular\",\"angular 4\",\"angular 5\",\"blog\",\"blogger\",\"blogging\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/\",\"name\":\"Difference Between Observables and Promises - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Difference-Between.png\",\"datePublished\":\"2022-02-24T07:22:30+00:00\",\"dateModified\":\"2022-02-24T07:23:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Difference-Between.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Difference-Between.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/difference-between-observables-and-promises\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Difference Between Observables and Promises\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Difference Between Observables and Promises - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/","og_locale":"en_US","og_type":"article","og_title":"Difference Between Observables and Promises - InnovationM - Blog","og_description":"For dealing with adaptive data in Angular, we can choose either Promise or Observable. Both get and post methods of HTTP and HttpClient return Observable and it can be converted into Promise using toPromise() method. So, what’s the distinction when they’re both dealing with adaptive data? What actually is the difference? Promise generates a mono […]","og_url":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-02-24T07:22:30+00:00","article_modified_time":"2022-02-24T07:23:48+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/02\/Difference-Between-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Difference Between Observables and Promises","datePublished":"2022-02-24T07:22:30+00:00","dateModified":"2022-02-24T07:23:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/"},"wordCount":315,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/02\/Difference-Between.png","keywords":["angular","angular 4","angular 5","blog","blogger","blogging"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/","url":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/","name":"Difference Between Observables and Promises - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/02\/Difference-Between.png","datePublished":"2022-02-24T07:22:30+00:00","dateModified":"2022-02-24T07:23:48+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/02\/Difference-Between.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/02\/Difference-Between.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/difference-between-observables-and-promises\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Difference Between Observables and Promises"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7143"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7143\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7144"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}