title: How to remove the redundant requests in RXJS?
body: <p>I am working on a front-end project with Rxjs and Angular Framework and I want to get json data from a api "api/data_processor_classlib.php....". There are three parts was subscribed the pipe this.webProtectionHTML$ at HTML. I don't know why the pipe this.webProtectionHTML$ made requests 3 times. Is any possible solution that just sent one request and update all data in HTML? Thanks.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>    &lt;div class="tr"&gt;
        &lt;div class="align-left"&gt;Phishing &amp; Other Frauds&lt;/div&gt;
        &lt;div class="align-right"&gt;{{ (webProtectionHTML$|async)?.phishing}}&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tr"&gt;
        &lt;div class="align-left"&gt;Spam URLs&lt;/div&gt;
        &lt;div class="align-right"&gt;{{ (webProtectionHTML$|async)?.spamURLs}}&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tr"&gt;
        &lt;div class="align-left"&gt;Malware Sites&lt;/div&gt;
        &lt;div class="align-right"&gt;{{ (webProtectionHTML$|async)?.malware}}&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>this.webProtectionHTML$ = this.dayService$
        .pipe(
          mergeMap((days: DaysPeriod // params added to request url) =&gt; this.httpClient.get(`api/data_processor_classlib.php....`//request url, { responseType: 'text' })),
          map((html: string) =&gt; {
            //get html code and find data return as json data
            let result = this.getWebProtectionData(html)
            return result
          }))
  </code></pre>
  
  <p>Network log:</p>
  
  <p><a href="https://i.stack.imgur.com/H4asb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H4asb.jpg" alt="enter image description here"></a></p>