title: Angular prevent multiple token refresh on asynchronous requests
body: <p>All my http requests go through the custom <strong>HttpService</strong>. This service refreshes the token when it's expired before sending the request.</p>
  
  <p>It works fine but it refreshes the token multiple times if the loaded page has multiple http requests. For example, if the page has 10 requests through the services, this means 10 times token refresh.</p>
  
  <p>I've tried to describe this by sample code:</p>
  
  <p><strong>loaded page and used services</strong></p>
  
  <pre><code>export class Page1 implements OnInit {
      constructor(
          private service1: Service1,
          private service2: Service2
      ) { }
  
      ngOnInit() {
          this.service1.getData...
          this.service2.getData...        
      }   
  }
  
  @Injectable()
  export class Service1 {
      constructor(
          private httpService: HttpService
      ) {}
  
      getData(): Observable&lt;any&gt; {
          return this.httpService.get(.....)
              .map((response: Response) =&gt; {
                  return response.json();
              });
      }
  }
  @Injectable()
  export class Service2 {
      constructor(
          private httpService: HttpService,
          private service1: Service1
      ) {}
  
      getData(): Observable&lt;any&gt; {
          return this.httpService.get(.....)
              .map((res: Response) =&gt; res.json().response)
              .flatMap((newItem: Item) =&gt; {
                      this.service1.getData(...)
              });
      }
  }
  </code></pre>
  
  <p><strong>custom http service</strong></p>
  
  <pre><code>@Injectable()
  export class HttpService extends Http {
  
      constructor (backend: XHRBackend, options: RequestOptions) {
          .............
      }
  
      request(url: string|Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
  
          ................
  
          if(tokenNotExpired('access_token')){ // if token is NOT expired
  
              return super.request(url, options);
  
          }else{  // if token is expired
  
              return this.updateToken()
                  .flatMap((result: boolean) =&gt; {
                      return this.request(url, options);  
              });
          }
      }
  
      updateToken(): Observable&lt;boolean&gt; {
  
          // set the new token
          .....
  
      }
  }
  </code></pre>
  
  <p>How can I perevent the token refresh per request by setting these requests in que and send them only when the new token is ready?</p>
  
  <p><em>Note: I don't know if it's matter but the service requests can be combined by <code>flatMap</code> or <code>forkJoin</code>....</em></p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I've updated my code according to <strong><em>@bviale</em></strong>'s answer. </p>
  
  <pre><code>request(url: string|Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
  
      ................
  
      if(tokenNotExpired('access_token')){ // if token is NOT expired
  
          return super.request(url, options);
  
      } else {  // if token is expired
  
          // There is already a call to updateToken() in progress,
          // wait for it to finish then process the request
          if (this.updateTokenPromise) {
              return Observable.fromPromise(return this.updateTokenPromise.then(() =&gt; {
                  return this.request(url, options);  
              }));
          }
          // Start to call updateToken(), then resolve the promise
          else {
              this.updateTokenPromise = new Promise((resolve, reject) =&gt; {
                  this.updateToken().toPromise()
                      .then((result: boolean) =&gt; {
                          resolve(result);
                      });
              });
  
              return Observable.fromPromise(return this.updateTokenPromise.then(() =&gt; {
                  return this.request(url, options);
              }));
          }
      }
  }
  </code></pre>
  
  <p>My updated <code>request()</code> method perfectly stops the requests, invokes the <code>updateToken()</code> only one time, gets the token, and then calls the requests but for each request I get the following error now:</p>
  
  <p><a href="https://i.stack.imgur.com/E25z1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E25z1.png" alt="enter image description here"></a></p>
  
  <p>I've noticed that the service calls returns the following <strong>response</strong> which ofcourse will cause <code>e.json is not a function</code> exception:</p>
  
  <pre><code>Object { _isScalar: false, source: Object, operator: Object }
  </code></pre>
  
  <p>I think this is also something I need to cast?</p>