点击重载按钮后,AngularJS-then()方法未被调用

AngularJS - then() method not being called after reload button click

本文关键字:方法 调用 AngularJS-then 重载 按钮      更新时间:2023-09-26

由于AJAX的异步特性,我以前遇到过未定义变量的问题。我已经解决了这个问题,但是,现在我有了一个新的问题。我有以下代码:

$scope.cities = [
    {name: 'Phoenix,US'},
    {name: 'Atlanta,US'},
    {name: 'Honolulu,US'}
];
$scope.items = [];
$scope.reload = function() {
    alert("Reload clicked");
    var promises = [];
    angular.forEach($scope.cities, function(city) {
        var deferred = $q.defer();
        delete $http.defaults.headers.common['X-Requested-With'];
        $http.get('http://api.openweathermap.org/data/2.5/weather?q=' + city.name).success(function(data, status, headers, config) {
            alert("success");
            deferred.resolve(data);
        });
        promises.push(deferred.promise);
    });
    return $q.all(promises);
};
//not being called after reload button is clicked
$scope.reload().then(function(data) {
    $scope.name0 = data[0].name;
    alert($scope.name0);
);

我的$scope.reload在初始页面加载时以及单击重新加载按钮时都会被调用。然而,点击我的重新加载按钮后,scope.reload().then(function(data))没有被调用;它只在初始页面加载时被调用,即使$scope.reload确实被调用(正如我的alert语句所测试的那样)。

有人能告诉我我在这里做错了什么吗?

您必须将then()函数放入reload()函数中。

工作小提琴
我为你制作了一把工作小提琴给你看。

我移动了这个代码:

$q.all(promises).then(function(data) {
    $scope.answer = data;
});

并将其放入reload函数中。

$scope.reload = function () {
    var promises = [];
    angular.forEach($scope.cities, function (city) {
        var deferred = $q.defer();
        delete $http.defaults.headers.common['X-Requested-With'];
        $http.get('http://api.openweathermap.org/data/2.5/weather?q=' + city.name).success(function (data, status, headers, config) {
            deferred.resolve(data);
        });
        promises.push(deferred.promise);
    });
    // This block here:
    $q.all(promises).then(function(data) {
        $scope.answer = data;
    });
};

不确定它是否会产生影响,但您并不需要在循环中手动创建新的promise$http已经返回了一个可以使用的承诺:

var promises = [];
angular.forEach($scope.cities, function(city) {
    delete $http.defaults.headers.common['X-Requested-With'];
    var promise = $http.get('http://api.openweathermap.org/data/2.5/weather?q=' + city.name);
    promise.success(function(data, status, headers, config) {
        alert("success");
    });
    promises.push(promise);
});