title: Force an Asynchronous call to behave Synchronously
body: <p>In my React app, I'm trying to calculate a value based on three other values. I've contained all of the calculation logic to the back end, which is a microservice I make asynchronous calls to. The function in which I am asynchronously trying to get that calculated value is in the middle of many synchronous hooks. </p>
  
  <p>In the UI layer, I call the function which I want to return the end result (returned asynchronously). That called function calls another function, which calls another function, which returns a new Promise. See code below:</p>
  
  <pre><code>// DateUI.js (layer 1)
  selectDate(dateField, flight, idx, saved, momentTime, e) {
      if (moment(momentTime).isValid()) {
          if (dateField == "StartDate") {
              // The initial problematic function call, need to set endDate before I continue on
              let endDate = PlanLineActions.calculateFlightEndDate(periodTypeId, numberOfPeriods, momentTimeUnix);
  
              flight.set("EndDate", endDate);
          }
  
          this.theNextSyncFunction(..., ..., ...);
      }
  }
  
  
  // DateActions.js (layer 2)
  calculateFlightEndDate(periodTypeId, numberOfPeriods, startDate) {
      let plan = new Plan();
  
      plan.getFlightEndDate(periodTypeId, numberOfPeriods, startDate).then(function(response) {
          // response is JSON: {EndDate: "12/05/2016"}
          response.EndDate;
      }, function(error) {
          log.debug("There was an error calculating the End Date.");
      });
  }
  
  
  // DateClass.js (layer 3)
  getFlightEndDate(periodTypeId, numberOfPeriods, startDate) {
      let path = '/path/to/microservice';
      return this.callServer(path, 'GET', {periodTypeId: periodTypeId, numberOfPeriods: numberOfPeriods, startDate: startDate});
  }
  
  
  // ServerLayer.js (layer 4)
  callServer(path, method = "GET", query = {}, data, inject) {
      return new Promise((resolve, reject) =&gt; {
          super.callServer(uri.toString(),method,data,inject).then((data) =&gt; {
              resolve(data);
          }).catch((data) =&gt; {
              if (data.status === 401) {
                  AppActions.doRefresh();
              }
              reject(data);
          });
      });
  }
  </code></pre>
  
  <p>I am under the impression that, because ServerLayer.js (layer 4) returns a <code>new Promise</code> (and thus DateClass.js (layer 3)), calling <code>plan.getFlightEndDate(...).then(function(response) {...</code> will not complete until the response comes back resolved or rejected. This is not currently happening, as the code in DateUI.js (layer 1) will continue on to call <code>this.theNextSyncFunction</code>, and then resolve ~50ms later with the proper data.</p>
  
  <p>How do I force PlanLineActions.calculateFlightEndDate(...) in DateUI.js (layer 1) to complete with a response before I continue on with selectDate()?</p>