Angular 服务 - 返回 http 响应答案

【问题标题】：Angular Service - Return http responseAngular 服务 - 返回 http 响应
【发布时间】：2015-11-03 18:33:16
【问题描述】：

我正在尝试构建一个 Angular 服务，我可以重用它来执行我的 http 请求等。当它不在服务中时，这一切都有效。

以下代码可以正常工作并进行登录，但 $scope.data 的日志始终未定义。如果我在返回数据之前登录成功，它会返回数据，但不会返回到控制器，这是我真正想要做的。

为了澄清起见，我希望能够在我的控制器中成功访问从服务器返回的 json 数据作为“数据”。

//App.js

.service('SaveSubmitService', function ($http, $log) {
    this.addItem = function(url, options){
        var xsrf = $.param({
            Username: options.Username,
            Password: options.Password
    });

    $http({
        method: 'POST',
        url: url,
        data: xsrf,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).success(function(data, status, headers, config) {
            return data;

    }).
        error(function(data, status, headers, config) {
            console.log(data);
            return false;


   });
    }

})

控制器：

.controller('LoginCtrl', function ($scope, $stateParams, $location, $ionicLoading, $http, SaveSubmitService, $log) {
        if (localStorage.getItem("SessionKey")) {
            $location.path('home');
        }
        $scope.login = {};
        $scope.doLogin = function doLogin() {

           $scope.data = SaveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login);
           $log.info($scope.data);

        };
    })

【问题讨论】：

我有更好的方法来实现它。
它不会工作，因为你的服务没有返回任何东西。
你需要等到promise解决var promise = SaveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login); promise.then(function(data){$scope.data = data})
你不能从 ajax 调用返回，它会返回一个可以用.then扩展的promise

标签： javascript angularjs

【解决方案1】：

首先让SaveSubmitService返回promise object。然后使用它的 API 提供数据加载后执行的回调：

.service('SaveSubmitService', function ($http, $log) {
    this.addItem = function (url, options) {

        var xsrf = $.param({
            Username: options.Username,
            Password: options.Password
        });

        return $http({
            method: 'POST',
            url: url,
            data: xsrf,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        .then(function(response) {
            return response.data;
        })
        .catch(function(error) {
            $log.error('ERROR:', error);
            throw error;
        });
    }
});

您将在控制器中像这样使用它：

$scope.doLogin = function doLogin() {
    SaveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login).then(function(data) {
        $scope.data = data;
        $log.info($scope.data);
    });
};

注意，你如何返回 $http 函数调用的结果，它返回你在控制器中使用的 Promise。

【讨论】：

这是有道理的。我唯一没有得到的是控制器上未定义数据
确保访问数据内部 then回调，而不是外部。
我是，您的确切代码因未定义数据而崩溃
成功块中是否定义了数据：console.log(data)？你进入then 阻止你从success 返回的任何东西。
哎呀，对不起，我的代码中有一个类型，应该是 .then(function(data) {...}。检查更新的代码，我之前忘记了data。

【解决方案2】：

saveSubmitServiceService 方法正在返回 promise，可以使用 .then(function()) 解决它

您的控制器代码如下所示。

代码

$scope.doLogin = function doLogin() {
    var promise = saveSubmitService.addItem('http://*****/Services/Account.asmx/Login', $scope.login);
    promise.then(function(data) {
        $scope.data = data
    });
};

谢谢

【讨论】：

【解决方案3】：

.factory('SaveSubmitService', function ($http, $log) {
    return{
    getData:function(url,xsrf)
    {
           $http({
                  method: 'POST',
                  url: url,
                  data: xsrf,
                  headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
                 }
          }).success(function(data, status, headers, config) {
               return data;

          }).
             error(function(data, status, headers, config) {
             console.log(data);
             return false;


         });
    }
   }

})


.controller('LoginCtrl', function ($scope, $stateParams, $location, $ionicLoading, $http, SaveSubmitService, $log) {
        if (localStorage.getItem("SessionKey")) {
            $location.path('home');
        }
        $scope.login = {};
        $scope.doLogin = function doLogin() {

           $scope.data = SaveSubmitService.addItem(, );
           $log.info($scope.data);

        };

               SaveSubmitService.getData('http://*****/Services/Account.asmx/Login',$scope.login).success(function(data,status){
                 $scope.data
                 }).error(function(data,status){ });
    )};

【讨论】：