如何在 Angular js 中使用 $q 返回值？答案

【问题标题】：How to return value using $q in angular js?如何在 Angular js 中使用 $q 返回值？
【发布时间】：2015-10-21 19:22:48
【问题描述】：

如何使用 promise
返回数据得到错误，successdata 不是我的控制器中的函数，我不知道我做错了什么。我是否错过了控制器中的某些内容？我通过调试应用程序响应观察到正在服务中，但没有任何返回

 var module = angular.module('app', []);
module.service("webservice", function($http,$q) {

    return {
        callservice:function(method,url,_data){
            var deferred = $q.defer();
            var promise = deferred.promise;
            $http({
                method: method,
                url: App_Service_api+url,
                data: _data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).
            success(function (data, status, headers, config) {
                if (data.success) {
                    deferred.resolve(data.message);
                    //return deferred.promise;
                    promise.successdata = function(fn) {
                        promise.then(fn);
                        return deferred.promise;
                    }
                }
                else {
                    deferred.reject("Plase Enter valid data.");
                    //return deferred.promise;
                    promise.errordata = function(fn) {
                        alert("error");
                        promise.then(null, fn);
                        return deferred.promise;
                    }
                }

            }).
            error(function(data, status, headers, config){
                deferred.reject("Plase Enter valid data.");
                //return deferred.promise;
                promise.errordata = function(fn) {
                    promise.then(null, fn);
                    return deferred.promise;
                }
            }); 

        }
    }
})

这是我的控制器代码

webservice.callservice('POST',App_Service_login,inputs).successdata(function(data){
                var alertPopup = $ionicPopup.alert({
                    title: 'Login Succesfull!',
                    template: 'Please check your credentials!'
                });
            })
                .errordata(function(data) {
                    var alertPopup = $ionicPopup.alert({
                        title: 'Login failed!',
                        template: 'Please check your credentials!'
                    });
                });

【问题讨论】：

标签： angularjs ionic

【解决方案1】：

我重构了一点你的代码。说真的，我不明白为什么要创建函数successdata 和errordata。你可以试试这样更简单的：

服务：

module.service("webservice", function($http, $q) {
    return {
        callservice: function(method, url, _data){
            var deferred = $q.defer();
            $http({
                method: method,
                url: App_Service_api + url,
                data: _data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).
            success(function (data, status, headers, config) {
                if (data.success) {
                    deferred.resolve(data.message);
                }
                else {
                    deferred.reject("Plase Enter valid data.");
                }
            }).
            error(function(data, status, headers, config){
                deferred.reject("Plase Enter valid data.");
            }); 
            return deferred.promise;
        }
    }
});

控制器：

webservice.callservice('POST', App_Service_login, inputs).then(function(dataMessage){
    console.log('dataMessage', dataMessage);
    var alertPopup = $ionicPopup.alert({
        title: 'Login Succesfull!',
        template: 'Please check your credentials!'
    });
})
.catch(function(errorMessage) {
    console.log('errorMessage', errorMessage);
    var alertPopup = $ionicPopup.alert({
        title: 'Login failed!',
        template: 'Please check your credentials!'
    });
});

更新：

这个service 代码应该通过在服务器端返回correct http status code 进行一些修复来改进。通过此更改而不是返回属性 data.success = false，当出现一些验证错误时，您应该返回 Status 400 Bad Request 和 data.message = 'Please Enter valid data'。这样做你应该从你的响应中删除属性data.success，控制器将保持不变，你的服务变成：

服务：

module.service("webservice", function($http, $q) {
    return {
        callservice: function(method, url, _data){
            return $http({
                method: method,
                url: App_Service_api + url,
                data: _data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            });
        }
    }
});

来自Angular $http doc：

200 到 299 之间的响应状态代码被视为成功状态并将导致成功回调被调用。注意如果响应是重定向，XMLHttpRequest 将透明跟随它，这意味着错误回调将不会被调用回复。

【讨论】：

【解决方案2】：

也许我没有正确理解您的代码，但我认为它远非复杂。只需这样做：

    success(function (data, status, headers, config) {
        if (data.success) {
            deferred.resolve(data.message);
        }else{
            deferred.reject(...)
        }

和：

webservice.callservice('POST',App_Service_login,inputs)
.then(function(data){
   var alertPopup = $ionicPopup.alert({..})
}, function(err){
  //errorhandling
});

【讨论】：

【解决方案3】：

$http 本身正在返回一个承诺，因此无需在那里创建一个新的可延迟对象。

整个事情可以简化成：

var module = angular.module('app', []);
module.service("webservice", function($http,$q) {

    return {
        callservice:function(method,url,_data){
            return $http({
                method: method,
                url: App_Service_api+url,
                data: _data,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).
            then(function (response) {
                if (response.data.success) {
                    return data.message;
                }
                else {
                    $q.reject("Plase Enter valid data.");
                }
            }, function() {
                $q.reject("Plase Enter valid data.");
            }); 
        }
    }
});

【讨论】：