Returning a value from a Promise

Question

I would like to call the Google Maps Geocoding API using a Promise like this:

function makeGeoCodingRequest(address,bounds)
{
    /*
        Input parameters:
            address:a string
            bounds: an object of class google.maps.LatLngBounds(southWest,northEast)

        This will return a set of locations from the google geocoding library for the given query
     */
    var url="https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=AIzaSyD9GBloPC20X-1kWRo7sm_0z5xvCiaSd3c";
    var promise,response;
    var messages={
            "ZERO_RESULTS":"No results were found",
            "OVER_QUERY_LIMIT":"We are over the query limit.Wait awhile before making a request",
            "REQUEST_DENIED":"Request was denied,probably using a bad or expired API Key",
            "INVALID_REQUEST":"Request was sent without the required address,component or component",
            "UNKNOWN_ERROR": "There was an error somewhere on Google's servers" 
    };
    if(address)
        promise=Q($.ajax({
            type: "GET",
            url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=API_KEY"
        }));
        return promise.then(function(data) {
            if (data.status === "OK") return data;
            else    console.error(messages[data.status]);
            return null;    
        });
}

When I call the function makeGeoCodingRequest request,I find that I obtain a promise instead of a value:

 var geo=makeGeoCodingRequest(address);
 console.log(Q.isPromise(geo));//returns true

Why isnt promise.then executed before the value was returned? How can I obtain a value from this promise instead of another promise?

Answer 1

If you depend on a promise in order to return your data, you must return a promise from your function.

Once 1 function in your callstack is async, all functions that want to call it have to be async as well if you want to continue linear execution. ( async = return a promise )

Notice that your if statement does not have braces and thus only the first statement after it will not be executed if the condition fails.

I fixed it in this example. Notice the remarks I added.

if(address){
    promise=Q($.ajax({
        type: "GET",
        url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&key=API_KEY"
    }));
    return promise.then(function(data) {
        // whatever you return here will also become the resolve value of the promise returned by makeGeoCodingRequest
        // If you don't want to validate the data, you can in fact just return the promise variable directly
        // you probably want to return a rejected promise here if status is not what you expected
        if (data.status === "OK") return data;
            else console.error(messages[data.status]);
        return null;    
    });
}

You must call makeGeoCodingRequest in the following fashion.

makeGeoCodingRequest(address,bounds).then(function(data){
    // this will contain whatever 
    console.log(data);
});

Answer 2

I find that I obtain a promise instead of a value

Yes, because the operation is asynchronous and returns a promise which represents the future value.

Why isnt promise.then executed before the value was returned?

Because it's asynchronous. .then will ( must ) never execute its callback before it returns another promise.

How can I obtain a value from this promise instead of another promise?

You are getting the value in the callback:

makeGeoCodingRequest(address).then(function(geo) {
    console.log(geo)
    console.log(Q.isPromise(geo)); // false
    // do anything with the value here
})
// if you need to do anything with the result of the callback computation:
// you're getting back another promise for that!

It's impossible to obtain it synchronously from the promise ( many have tried ). That would mean blocking execution, which we don't want - let's stay async and non-blocking!

Answer 3

You are returning a promise from the function makeGeoCodingRequest. That is a good thing according to me, this helps you chain any more async calls if required in future. What I would suggest is to use a .then() on the returned promise and check if the promise has any returned value or error in the following manner.

var geoPromise = makeGeoCodingRequest(address); 
geoPromise.then(
   onSuccess(result){
       // You can use the result that was passed from the function here.. 
   }, 
   onFailure(response){
      // Handle the error returned by the function.
   }
);

Answer 4

If you want your code to wait until the asynchronous action is completed before continuing (BAD IDEA - the page will freeze while the request is completing) then add async: false to the ajax request's parameters.

My recommendation, though, is to have makeGeoCodingRequest return nothing directly - and simply give it an extra argument, requestCallback so that its caller can pass in a function that will be called when the data is available. Call that function, with the resulting data, inside of your promise.then function.