Unlocking the Power of RxJS with Observable Sharing

Let's take a look at a function that contains the code below:

private foo() {
    let obs: Observable<any> = this._http.get<number>('/foo')

    obs.subscribe(x=> {
        console.log("foo : " + x)
    });

     this.blah(obs)
}

private blah(obs: Observable<any>) {
    obs.subscribe(x => {
       console.log("blah : " + x)
    })
}

Although this code successfully prints both foo and blah, it makes an additional http call to /foo.

I attempted to fix this issue by substituting the subscribe method with do in the blah function, but it did not resolve the problem. What could be causing this behavior?

Answer №1

Indeed, that is the expected behavior. By creating two subscriptions and using the http.get method which generates a "cold" Observable, it triggers two separate HTTP requests.

To prevent this from happening, one simple solution is to share the source Observable by utilizing the share() operator.

let sharedObs = this._http.get<number>('/foo').share();

An alternative approach would be to create a ConnectableObservable with the use of the publish() operator and manually connect to the shared source.

let publishObs = this._http.get<number>('/foo').publish();

publishObs.subscribe(response => {
    console.log("Received response: " + response)
});

this.someFunction(publishObs);

publishObs.connect();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to specify separate paths for i18n resources in Angular depending on whether it's for the development or

While working on my development version of the Angular application, all paths are correct. However, when I build the application for production and deploy it to /frontend/, the paths seem to change. In order to modify the path to i18n resources (using ngx ...

The creation of a parameterized function that doubles as an object property

interface item { first: string; last: string; } const itemList = Item[]; updateAttribute = (index, attributeToUpdate) => { itemList[index].attributeToUpdate = "New first/last" } The snippet above showcases an interface named item with propertie ...

When is it necessary to use JSON.parse(JSON.stringify()) with a Buffer object?

I am currently working with Buffer objects in my existing code. let dataObject = JSON.parse(JSON.stringify(data)); At first glance, it seems like the above code is redundant and doesn't achieve much. However, replacing it with: let dataObject = data; ...

I'm having trouble getting Tailwind CSS colors to work with my Next.js components. Any tips on how to apply background colors

https://i.stack.imgur.com/8RGS3.png https://i.stack.imgur.com/FRTOn.png Hey there! I'm currently experimenting with using Tailwind background colors in my Next.js project. However, I'm facing an issue where the background color is not being appl ...

Reactive forms with Angular CDK drag and drop

I'm facing an issue in this scenario: https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html Everything seems to be functioning properly, except that when I drag the select box, it keeps resetting to the first value ...

Transmitting OfficeJS 2D Array via an Ajax Call

Struggling with sending a "large" table using OfficeJS: functionfile.html loaded from manifest route <script> (function (){ "use strict"; Office.initialize = function (reason) { $(document).ready(function() { $("#send-data-button").cli ...

What is the best way to change a JavaScript variable into a PHP variable?

I am interested in converting my JavaScript variable to a PHP variable... Currently, I have the following scenario - in the code below there is a variable e, but I would like to utilize e in PHP as $e: <script> function test() { var e = documen ...

Creating a list of font sizes for each <p> tag in my HTML document

I am looking to create an array containing the font sizes of all the p tags in my HTML document. How can I specifically target only the p elements and not their parent elements? ...

"Implemented a fresh pathway within the app-routing.module.ts file, but unfortunately, ngxAdmin is experiencing functionality issues

While customizing the ngx-admin template, I attempted to incorporate a new module into the app module and added its route in app-routing.module.ts. However, upon trying to open it, the module seems to be stuck at loading without any errors appearing in the ...

What is the best 'event' to pair with an <input/> element in iOS/Android development?

Looking for a way to toggle results when a user starts typing in a search field? Here are some event options: mousedown / mouseup touchstart / touchend focus You could also consider using the "change" event instead of "click" to check for text input an ...

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Is there a way to achieve a text filling effect on page scroll similar to the one found here: . The specific section reads: "Deepen customer relationships. Own the brand experience. Add high margin revenue. Manage it all in one place. Get back your pr ...

Issue encountered while configuring server using express.js

Here is the server.js file I am working on, but I encounter a specific error when trying to set up the server with Express.js var express = require('express'); var app = express(); var PORT = process.env.PORT || 3000; app.all('/*', ...

utilizing routerLinks to transfer data and trigger a specific function

I'm having trouble passing data through the routerLink and calling the function(). It doesn't seem to be working as expected. Here's an example of my code and you can view a working demo on StackBlitz. First Component(HTML) <span [route ...

Creating an interface or type in Typescript with a nested object property that uses keys from the same interface

I am looking to create an interface or type that can restrict the nested object properties based on keys defined in the main interface. class MyClass implements MyInterface { prop1: string; promp2: number; nestedObj: { prop1: string; // Allowed a ...

Inconsistencies in Executing JavaScript Methods Between Mobile Safari and Android Chrome

I have a JavaScript method that appears like this: function onAction() { getValue1(); getValue2(); getValue3(); } When I invoke onAction(), I notice a discrepancy in behavior between Mobile Safari and Android Chrome. In Safari, all three meth ...

Manipulating the content within an iframe through javascript executed from the parent document

I have a basic website located in A.html <body> <p class="text">Some text</p> </body> There is also another site that displays A within an iframe on B.html <body> <iframe id="frame" src="B.html" onload="onLoadHan ...

Exploring the intricacies of using jquery text() with HTML Entities

I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...

Issues with accessing view variables within a directive query are persisting

I am struggling with a specific directive: @Directive({ selector: '[myDirective]' }) export class MyDirective implements AfterViewInit { @ViewChild('wrapper') wrapper; @ViewChild('list') list; ngAfterViewInit() { ...

Is there a way to determine the monitor's frame rate using JavaScript?

Could JavaScript be used to determine the refresh rate of a monitor, typically set at 60Hz for most LCD monitors? Is there a method available to execute a function after a specific number of frames have passed? There has been some curiosity about my reaso ...

Ways to incorporate radio buttons, checkboxes, and select fields into a multi-step form using JavaScript

In the snippet below, I have created a multi-step form where users can provide details. The issue is that currently only text input fields are being accepted. The array of questions specifies the type of input required for each question: Question no.1 req ...