title: How To Limit Concurrent API Requests In Angular Using RxJs
body: <p>I have an Angular 7 application that allows you to multi-upload files. For each file chosen, it makes a request to the server. This isn't great because opening hundreds of concurrent calls seems like a  potential problem for my backend servers.</p>
  <p>What I'd like to do is limit the number of concurrent requests that can be made by my application. I have a generic API class that I'd like to use to do the limiting in app-wide beyond just the file uploading, instead of needing the file-upload component itself to have to manage it.</p>
  <p>I'm admittedly confused at times by RxJx, but I'm pretty sure that this is possible.</p>
  <pre><code>class ApiService {
  
      get(path: string, params: any = {}): Observable&lt;any&gt; {
          return this.http.get(path`, { params: params });
      }
      
      uploadFile(path: string, body: any = {}): Observable&lt;any&gt; {
          ...code for preparing file here...
          return this.http.post(path, body);
      }
      
  }
  
  class FileUploader {
  
      // called many times-- once for each file
      uploadFile(file) {
          this.apiService.uploadFile(path, body: file).subscribe(response =&gt; {
               // use response here
          })
      }
  }
  
  </code></pre>
  <p>What I imagine is that in the api class, instead of executing the http call immediately in the fileUpload or get functions, I could add to a queue that uses a max concurrency or something and waits to make the call until there is room. But I'm not sure how to do this given that I'm subscribed immediately in the File Uploader class.</p>