How would I use a promise to wait for the asynchronous geocode method to return a result and then return either true or false?
function LocationValidator(value, element, paras) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': value }, function (results, status) { // called asynchronously
if (status == google.maps.GeocoderStatus.OK) {
return true;
} else {
return false;
}
});
}
In the browser world you live in now, how you create your own promise unfortunately depends upon which promise library you are using. Here are a couple ways you could create a geocode(address) function that returns its result via a promise:
// jQuery promises
function geocode(address) {
var geocoder = new google.maps.Geocoder();
var def = $.Deferred();
geocoder.geocode({ 'address': value }, function (results, status) { // called asynchronously
if (status == google.maps.GeocoderStatus.OK) {
def.resolve(results);
} else {
def.reject(status);
}
});
return def.promise();
}
// ES6 style (supported by many polyfills, promise libraries and some browsers natively)
// my favorite library is Bluebird which this would work with
function geocode(address) {
var geocoder = new google.maps.Geocoder();
return new Promise(function(resolve, reject) {
geocoder.geocode({ 'address': value }, function (results, status) { // called asynchronously
if (status == google.maps.GeocoderStatus.OK) {
resolve(results);
} else {
reject(status);
}
});
});
}
Both can be used like this which is nice and simple:
geocode(address).then(function(result) {
// code here that can use the result
}, function(errStatus) {
// code here to handle an error
});
Note: you can't take an asynchronous operation like this and make it into a synchronous operation. You just can't do that in Javascript. So, you have to learn how to program with asynchronous operations and promises are one convenient way of doing that.
Other references:
Wrap Google map geocoder.geocode in a Promise
One can "wrap" the geocode async call as follows - assuming the return value of the callback itself is irrelevant.
Note that this cannot be used to make the asynchronous call synchronous; but it does "wrap" the asynchronous callback to use a promise.
function geocodeWithPromise(data) {
// Different frameworks provided different methods of creating and
// using their promise implementation. Eg in jQuery the following would be:
// promise = $.Deferred();
var promise = makePromise();
geocoder.geocode(data, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
promise.resolve(results, status);
} else {
promise.reject(status);
}
});
return promise;
}
// The call is "synchronous" and a promise is returned immediately -
// but done/fail are called later as they are [themselves callbacks and]
// part of the asynchronous promise.
geocodeWithPromise({ 'address': value })
.done(function () { .. })
.fail(function () { .. });
The tutorial JavaScript Promises: There and back again explains promises in more detail, and covers ES6-style promises.
(As jfriend keeps pointing out, the above code uses done/fail which are not required - as they can be implemented with then - and are only found in some promise implementations such as jQuery.)
