如何使用延迟对象通过HTML5 Geolocation API检索经度和纬度？

Question

我想使用HTML5 GeoLocation API来检索我的经度和纬度,并使用jQuery Deferred对象管理请求.

这是我的代码的样子:

var geoLocation = {

    getLocation: function() {

        // create deferred object
        var deferred = $.Deferred();

        // if geo location is supported
        if(navigator.geolocation) {

            // get current position and pass the results to this.geoLocationSuccess or time out after 5 seconds if it fails
            navigator.geolocation.getCurrentPosition(this.geoLocationSuccess, this.geoLocationError, {
                timeout: 5000
            });

        } else {

            // geo location isn't supported
            console.log('Your browser does not support Geo Location.');
        }

    },

    geoLocationSuccess: function(position) {

        // resolve deffered object
        deferred.resolve(position.coords.latitude, position.coords.longitude);

        // return promise
        return deferred.promise();
    },

    geoLocationError: function() {
        console.log('Geo Location failed.');
    }

};

这是我的Deferred对象:

$.when(geoLocation.getLocation()).then(function(data, textStatus, jqXHR) {

    console.log(data);

});

我期待then()回调返回经度和纬度,但我得到的deferred是未定义的错误.我认为它与我定义延迟对象的范围有关,但我不确定.我错过了什么？

Answer 1

迈克尔在阅读了Hackaholic的答案和你自己的答案之后,都将在处理成功返回的数据方面工作,但错误可以更好地处理.

如果navigator.geolocation.getCurrentPosition()失败,它会将一个可能提供信息的PositionError对象传递给它的错误处理程序.这个对象可以在承诺链中传递并在调用函数中处理,在两个答案中都被忽略.

同样,承诺拒绝也可用于通过您自己的"您的浏览器不支持地理位置"错误沿着承诺链.

var geoLocation = {
    getLocation: function() {
        var deferred = $.Deferred();
        if(navigator.geolocation) {
            // geo location is supported. Call navigator.geolocation.getCurrentPosition and :
            // - resolve the promise with the returned Position object, or
            // - reject the promise with the returned PositionError object, or
            // - time out after 5 seconds
            navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject, { timeout: 5000 });
        } else {
            //geo location isn't supported
            //Reject the promise with a suitable error message
            deferred.reject(new Error('Your browser does not support Geo Location.'));
        }
        return deferred.promise();
    } 
};

忽略注释,这非常紧凑,并注意如何geoLocation.getLocation()不尝试处理错误,但使它们可用于调用函数的错误处理程序.

现在,$.when()没有必要,因为你的geoLocation.getLocation()函数返回一个有自己.then()方法的promise .没有,它已经"可以"了$.when().

geoLocation.getLocation().then(function(position) {
    console.dir(position);
}).fail(function(err) {
    console.error(err);
});

因此,您充分利用承诺处理成功或失败的能力.