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

Correct way to use $http and $q within Angular service?

本文关键字：方法 http 服务 Angular      更新时间：2024-04-02

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

我创建了一个Angular服务，它通过$http调用Google地图api。根据返回的数据，我只需要城市的名称。我一直在与Angular服务中$http的异步特性作斗争。我能让它运行的唯一方法是用$q在服务中创建我自己的承诺。

它有效，但我不确定这是否是正确的方法。任何反馈都是非常受欢迎的！

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值，它就会被解决/拒绝。

相关文章：