javascript - 在 Angular 服务中使用 $http 和 $q 的正确方法?

标签 javascript angularjs angular-services

我需要进行反向地理编码并从纬度/经度信息中获取城市名称。

我创建了一个 Angular 服务,它通过 $http 调用 Google map API。从返回的数据中我只需要城市的名称。我一直在努力应对 Angular 服务中 $http 的异步特性。我能让它运行的唯一方法是在服务中使用 $q 创建我自己的 promise 。

它有效,但我不确定这是否是正确的方法。我们非常欢迎任何反馈!

var app = angular.module('devApp', []);

app.factory('reverseGeoCoder', function($http, $q) {
    var service = {
        getAddress: function(lat, lng) {
            var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' +lng;
            var deferred = $q.defer();

            $http.get(url).then(function(data) {
                // extract the address and return it to the caller
                deferred.resolve(data.data.results[0].formatted_address);
            }, function(reason) {
                deferred.reject(reason);
            });
            return deferred.promise;
        }
    };
    return service;
});

app.controller('mainController', function(reverseGeoCoder) {
    var vm = this;
    reverseGeoCoder.getAddress(47.353166, 8.558387).then(function(data) {
            vm.address = data;
        }, function(reason) {
            console.log('reverse geocoding failed, reason: ' + reason);
    });
});

最佳答案

$http 本身已经返回一个 promise,因此您不必返回自己的:

app.factory('reverseGeoCoder', function($http, $q) {
    var service = {
        getAddress: function(lat, lng) {
            var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' +lng;

            return $http.get(url).then(function(data) {
                // extract the address and return it to the caller
                return data.data.results[0].formatted_address;
            }, function(reason) {
                return reason;
            });
        }
    };
    return service;
});

只要你不断返回 promise ,你就可以用 .then 链接它们,一旦你返回一个非 promise 值,它将被解决/拒绝。

关于javascript - 在 Angular 服务中使用 $http 和 $q 的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36501538/

相关文章:

javascript - 将构造函数从单独的文件加载到 Chrome 扩展选项页面

javascript - 在 $http.post 中使用参数不起作用

javascript - 使用translatePartialLoader时如何解决 Angular 翻译FOUC问题?

javascript - Angular JS 中的实时重新加载

javascript - 提供 Json AngularJS 的服务

javascript - 将 SocketIO 集成到用于 http 请求的 Angular 应用程序

javascript - jQuery 不会在页面上执行,但会在 JSFiddle 中执行

php - 使用 PHP 将 Curl 检索到的 HTML 字符串转换为 JSON,使用 AJAX 服务

javascript - WebVR 不适用于最新版本的 Firefox

angularjs - 从服务获取异步数据