javascript - jquery 使用 Promise 和反向地理编码获取用户位置

Question

		//Get Users Current Location
		$("#collection-search-geolocation").click(function (event) {
		        event.preventDefault();
				var zipcode = '';

				getCurrentLocation().then(function(results) {
					console.log('done');
					zipcode = extractZipcode(results);
					callCollectionMap(zipcode);
				});

		        return false;
		});

		function extractZipcode(results) {
			var searchAddressComponents = results[0].address_components;
			var zipcode = searchAddressComponents.find(function(el) {
				return el.types[0] == "postal_code";
			}).short_name;
		}
	
		function getCurrentLocation() {
			navigator.geolocation.getCurrentPosition(function (position){
				var geocoder = new google.maps.Geocoder();
				var latLng   = new google.maps.LatLng( 
					position.coords.latitude, position.coords.longitude);
				var deferred = $.Deferred();
					
					geocoder.geocode(
						{'latLng': latLng}
					, function(results, status){
						if (status == google.maps.GeocoderStatus.OK) {
							console.log(results);
							deferred.resolve(results);
						} else {
							deferred.reject(status);
							console.log("Geocode was not successful for the following reason: " + status);
						}
					});

					return deferred.promise();
			});
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="collection-search-geolocation" href="#" class="button collection-point-search-geo-js">Click Here</a>

我正在尝试获取用户的点击位置。单击时，我想获取用户的位置，然后在地理编码成功执行后调用一个方法。这是我的代码，但地理编码是异步的，因此我需要使用 promise 。

我的问题是，结果在单击函数中返回 null，因为 geocode.geocoder 尚未完成，但我认为这就是 .done() 应该等待完成的内容？我也尝试了 .then() 并得到相同的结果。我收到错误无法读取未定义的属性 .done()。

Answer 1

您正在 getCurrentPosition 回调内部创建延迟 - 将其返回那里并不意味着它由 getCurrentLocation 返回 - 您需要在 getCurrentPosition 调用外部创建延迟，返回延迟.promise() 作为该函数的最后一行，但将解析/拒绝保留在原来的位置

所以，类似

function getCurrentLocation() {
    var deferred = $.Deferred();
    navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder();
        var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        geocoder.geocode({
            'latLng': latLng
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results);
                deferred.resolve(results);
            } else {
                deferred.reject(status);
                console.log("Geocode was not successful for the following reason: " + status);
            }
        });
    });
    return deferred.promise();
}

就我个人而言，我会避免使用 jQuery Deferred，因为它不是真正的 Promise/A+ 实现(也许在 3.x 中是这样，但是..)并且您已用 es6-promise

function getCurrentLocation() {
    return new Promise(function(resolve, reject) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var geocoder = new google.maps.Geocoder();
            var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            geocoder.geocode({
                'latLng': latLng
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    console.log(results);
                    resolve(results);
                } else {
                    reject(status);
                    console.log("Geocode was not successful for the following reason: " + status);
                }
            });
        });
    });
}