javascript - Angular 服务/ Controller 不返回 promise ？

Question

所以我终于让我的应用程序运行到它为 JSON 请求获取正确 URL 的位置。但是现在我无法使用该 URL。

我知道该服务正在从 Google Maps API 返回 promise ，我可能不应该这样做，但如果我不这样做，我会收到“Weather.getWeather is undefined”错误。我不知道为什么。

我怎样才能让它正常工作。感谢您的帮助。

weatherService.getWeather = function(city)  {


        var coordsUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + city;


        return $http.get(coordsUrl)
            .success(function(data) {
                var coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng;

            return getWeatherData(coords);  

        }); 

function getWeatherData(coords)  {
            var deferred = $q.defer(),
            apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
            weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';


            $http.jsonp(weatherUrl)
                .success(function(data) {

                    deferred.resolve(data);

                }).error(function(err) {

                    deferred.reject(err);

                });

            console.log(weatherUrl);

            return deferred.promise;
        }        

    };

Controller :

vm.fetchWeather = function(city) {

    Weather.getWeather(city)
        .then(function(data) {
            console.log(data);
            vm.place = data;
    });
};

Answer 1

您不应在您的 getWeather 服务函数中使用 .success，因为它不允许您返回任何类型的 数据。因为回调函数不能返回任何东西 Read Here about callback & promise .所以你应该使用 promise 方法来处理异步请求，基本上你可以将数据从 promise 函数返回到调用该函数的消费者函数。实际上，当 ajax 完成时，它会调用消费者 .then 函数。

您只需在 getWeather 函数中使用 .then 函数，然后在解析该异步调用时，它将调用 getWeatherData 函数这将再次返回一个 promise 。因此，当它得到解析时，它会调用 getWeatherData 的 .then 函数，当它从中返回数据时，那时 Weather.getWeather(city) 的 .then 函数将被调用。这整件事只不过是你在 promise 链中实现的。一个函数等待其他函数，一旦底层 promise 得到解决，它就会调用其 .then 函数。

Read here about Promise

代码

return $http.get(coordsUrl)
 .then(function(resp) {
    var data = resp.data
    var coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng;
    return getWeatherData(coords);  
}); 

也不需要在 getWeatherData 函数中创建额外的 promise，因为您可以在那里调用 $http 的 promise。

代码

function getWeatherData(coords)  {
    var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
    weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';

    return $http.jsonp(weatherUrl)
    .then(function(resp) {
       var data = resp.data;
       //you could play with data here before returning it.
       return data;
    },function(error) {
       return error;
    });
}

由 Roamer-1888 编辑

或者，修改 getWeatherData() 以接受 data 并为自己计算 coords。然后，流程控制语句将简化为 return $http.get(coordsUrl).then(getWeatherData);。

weatherService.getWeather = function(city) {
    var coordsUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + city;
    function getWeatherData(data) {
        var apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
            coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng,
            weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';
        return $http.jsonp(weatherUrl);
    }
    return $http.get(coordsUrl).then(getWeatherData);
};