title: HTTP call gets cancelled due to another method call, how can I force prevent the second call untill the HTTP is response is received?
body: <p>I'm doing authorization code flow for oauth2 and there is something I'm doing wrong here but I can't really detect.. </p>
  
  <p>Here is my code</p>
  
  <p>In app.js</p>
  
  <pre><code>myService.setup().then(function(){...
  </code></pre>
  
  <p>In service.js</p>
  
  <pre><code>var service = {
    setup(options) {
      this.processData();
      return this.getToken(options);
    },  
  
    processData(data) {
      let response = this._extractURLParams(window.location.href)
      if (response.hasOwnProperty("code")) {
        return this.handleAuthorizationCode(responseResult);
    },
  
    handleAuthorization(codeObject) {
    var service= this;
    return new Promise((resolve, reject) =&gt; {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", /token, true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      var params = 'grant_type=authorization_code&amp;code=' + codeObject.code + '&amp;client_id=client_id&amp;client_secret=secret&amp;redirect_uri=' + codeObject.redirectURi;
  
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
          var responseData = JSON.parse(this.response);
          resolve(service.storeToken(responseData));
        }
      };
      xhr.send(params);
    });
  },
  
  getToken(options) {
      let service = this;
      return new Promise(function (resolve, reject) {
     if(// localStorage has a token) {
       resolve(localStorage.getToken()) //dummy text, real code here
     } else {
        resolve(service.handleRedirectionsFlow(options));
        })
    },
  </code></pre>
  
  <p>What happens is as follows</p>
  
  <p>1) When I access my application, I call myService.setup()</p>
  
  <p>2) the setup() method will call processData(), and since the url will be empty, the if condition will not pass and hence we will call getToken()</p>
  
  <p>3) getToken() will call a method that will build a url and change the location to it so that we authenticate via a form on the authorization server and then we will redirect back to the application after authentication with a code!</p>
  
  <p>4) after authentication, we will redirect to the application with something like
   'url?code=abcasdasdsfdasifsfsfs</p>
  
  <p>5) Now, processData() will detect that the url has code property and we will call handleAuthorizationCode</p>
  
  <p>6) handleAuthorizationCode will simply do a post request to get a token and onReadyStateChange we will call another method to store the token.</p>
  
  <p>7) now when we call getToken() from the setup(), at this point the onreadystatechange hasn't been triggered from the previous method, causing that we redo the redirect to authenticate again and then the token request gets cancelled and we never store it..</p>
  
  <p>Could someone help me know where exactly I should put an extra promise and resolve it in order to call getToken() AFTER the onreadystatechange is striggered and the token is stored to avoid the infinite loop?</p>
  
  <p>Thanks</p>