{"id":1028,"date":"2023-06-02T05:00:00","date_gmt":"2023-06-02T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1028"},"modified":"2023-05-28T09:43:42","modified_gmt":"2023-05-28T16:43:42","slug":"rxjs-of-and-from","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-of-and-from\/","title":{"rendered":"RxJs of() and from()"},"content":{"rendered":"\n

So far, we have covered several RxJs operators<\/a> and information about Subjects<\/a>, but what about Observables themselves?<\/p>\n\n\n\n

There are a few utility functions that create Observables out of existing data. Such Observables immediately return the data and complete upon subscription.<\/p>\n\n\n\n

Here is an example of such an Observable created with the\u00a0of()<\/code>\u00a0function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And an example created with the\u00a0from()<\/code>\u00a0function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The difference between\u00a0of()<\/code>\u00a0and\u00a0from()<\/code>\u00a0is that\u00a0of()<\/code>\u00a0emits all the data right away in a single emission, whereas\u00a0from()<\/code>\u00a0uses an array of items and emits them one by one with no delay between emissions.<\/p>\n\n\n\n

In other words:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

What’s the point of an Observable that just returns data instantly and does nothing asynchronous? First is testing. Being able to return to an Observable with hard-coded data is perfect for unit testing purposes as we can quickly validate different scenarios without using the actual HttpClient<\/code>, for instance.<\/p>\n\n\n\n

Second is caching data and returning it as an Observable (which can be done even more easily with a\u00a0BehaviorSubject<\/code>\u00a0or\u00a0ReplaySubject<\/code><\/a>). For instance, say we have a service that retrieves a list of all countries in the world from a server. We know that that list doesn’t change every day, so we want to cache it so that if another component requests that data, instead of making another HTTP request, we return an Observable of that data:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Note the use of the\u00a0tap<\/a><\/code>\u00a0operator to spy on the Observable, catch the data, and store it in our “cache” variable.<\/p>\n\n\n\n

That way, the API is consistent and components always subscribe to an Observable, not knowing if the data comes from a server or a local cache.<\/p>\n","protected":false},"excerpt":{"rendered":"

So far, we have covered several RxJs operators and information about Subjects, but what about Observables themselves? There are a few utility functions that create Observables out of existing data. Such Observables immediately return the data and complete upon subscription. Here is an example of such an Observable created with the\u00a0of()\u00a0function: And an example created […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1028","post","type-post","status-publish","format-standard","hentry","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1028"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1028\/revisions"}],"predecessor-version":[{"id":1035,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1028\/revisions\/1035"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}