强制异步调用行为同步

Question

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.

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:

// 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) => {
        super.callServer(uri.toString(),method,data,inject).then((data) => {
            resolve(data);
        }).catch((data) => {
            if (data.status === 401) {
                AppActions.doRefresh();
            }
            reject(data);
        });
    });
}

I am under the impression that, because ServerLayer.js (layer 4) returns a new Promise (and thus DateClass.js (layer 3)), calling plan.getFlightEndDate(...).then(function(response) {... 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 this.theNextSyncFunction , and then resolve ~50ms later with the proper data.

How do I force PlanLineActions.calculateFlightEndDate(...) in DateUI.js (layer 1) to complete with a response before I continue on with selectDate()?

Answer 1

I think you don't understand how promises work.

First of all, functions always return immediately so you won't ever block execution of the next lines of code ( flight.set and theNextSyncFunction() in your case). This is the point of returning a promise: you get a promise immediately that you can attach a callback to (using then() ) that will get invoked later . If you want code to wait for the promise to resolve you have to put it in a then() callback.

Secondly, your calculateFlightEndDate() is not returning anything at all so endDate = calculateFlightEndDate() is simply setting endDate to undefined .

Solution

You should return a promise from calculateFlightEndDate() and put the code you want to execute afterwards inside a then() callback:

calculateFlightEndDate(periodTypeId, numberOfPeriods, startDate) {
    let plan = new Plan();

    return plan.getFlightEndDate(periodTypeId, numberOfPeriods, startDate).then((response) => {
        // response is JSON: {EndDate: "12/05/2016"}
        return response.EndDate;
    }, (error) => {
        log.debug("There was an error calculating the End Date.");
    });
}

if (moment(momentTime).isValid()) {
    if (dateField == "StartDate") {
        PlanLineActions.calculateFlightEndDate(periodTypeId, numberOfPeriods, momentTimeUnix).then((endDate) => {
            flight.set("EndDate", endDate);
            this.theNextSyncFunction(...);
        });
    }
}

You could also look into using ES7 async and await which allows you to write your async code so that it looks synchronous, but uses promises under the hood to accomplish the same thing.

Answer 2

You can't force something to be synchronous if it goes outside of the event loop like an ajax call. You're going to need something that looks like this:

PlanLineActions.calculateFlightEndDate(periodTypeId, numberOfPeriods, momentTimeUnix)
  .then(endDate => {
    this.theNextSyncFunction(..., ..., ...);
  })

In order to do this, calculateFlightEndDate will also need to return a promise, and thus it's a good thing that promises are chainable.

calculateFlightEndDate(periodTypeId, numberOfPeriods, startDate) {
  let plan = new Plan();

  // return promise!
  return plan.getFlightEndDate(periodTypeId, numberOfPeriods, startDate).then(response => {
    return response.EndDate; // must return here
  }, error => {
    log.debug("There was an error calculating the End Date.");
  });
}

That should do it.. and one more thing: you're doubling up on promises in your server call. If something has .then it's already a promise, so you can just return that directly. no need to wrap in new Promise (a promise in a promise.. no need!)

callServer(path, method = "GET", query = {}, data, inject) {
  // just return!
  return super.callServer(uri.toString(),method,data,inject).then((data) => {
    return data;
  }).catch((data) => {
    if (data.status === 401) {
      AppActions.doRefresh();
    }
    throw data; // throw instead of reject
  });
}