Javascript angularjs和$http请求

Javascript angularjs和$http请求,javascript,http,service,angularjs,Javascript,Http,Service,Angularjs,你好,我是AngularJs新手,正在尝试从我的服务器获取json数据。当服务被执行时,我在Fiddler中看到了清晰的响应。但是不会执行success或error函数,因此服务返回一个空数组 var app = angular.module('imageApp', []); app.service('imageService', function ($http) { var imageModels = []; this.Images = function (url) {

你好,我是AngularJs新手,正在尝试从我的服务器获取json数据。当服务被执行时,我在Fiddler中看到了清晰的响应。但是不会执行success或error函数,因此服务返回一个空数组

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);
    };
});

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


不要在这里重复,请参阅@Pete BD的解决方案:

像这样更新您的服务

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
拒绝
来自
$http
的响应,并使其在控制器上成为“可启用”


编写一个服务来处理$http请求对我来说总是一件麻烦的事,所以我创建这个来为我处理事情。如果需要,您可以查看。

谢谢您的帮助,这就是解决方案