2

您好，我是 AngularJs 的新手，正在尝试从我的服务器获取 json 数据。当服务被执行时，我在 Fiddler 中看到了明确的响应。但是没有执行成功或错误函数，因此服务返回一个空数组。

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

app.service('imageService', function ($http) {
    var imageModels = [];
    this.Images = function (url) {
        $http({ method: 'GET', url: url }).success(function (data) {
            imageModels = data;
        }).error(function (data) {
            imageModels = data || "Request failed";
        });

        return imageModels;
        };
    };
});

app.controller('ImageController', function (imageService, $scope) {
    $scope.fetch = function (url) {

        $scope.url = url;
        $scope.ImageModels = imageService.Images($scope.url);
    };
});
4

2 回答 2

2

$http 异步返回结果。因此，return imageModels将在 success() 或 error() 回调有机会运行之前执行。您需要等待 $http 创建的承诺来解决——在您的控制器中使用 then() 。

而不是在这里重复，请参阅@Pete BD 的解决方案：https ://stackoverflow.com/a/12513509/215945

于 2013-02-08T16:29:46.277 回答
0

像这样更新您的服务。

app.service('imageService', function ($http, $q) {
    this.Images = function (url) {
        return $http({ method: 'GET', url: url }).success(function (data) {
            $q.resolve(data);
        }).error(function (data) {
            $q.reject(data || "Request failed");
        });
    };
});

然后是您的控制器，您现在可以等待从服务返回的承诺。

imageService.Images($scope.url)
    .then(function(response){
        // success
    }).catch(function(error){
        // error
    })

所以发生了什么事？在您的服务上，请注意我们添加$q了一个承诺，以便我们可以reslove和reject响应，$http并使其在控制器上“可用”。

编写服务来处理 $http 请求对我来说总是很麻烦，所以我创建了这个Angular 模块来为我处理事情。如果你愿意，你可以检查一下。

于 2016-08-22T13:40:04.477 回答