在Angular JS中同步回调答案

【问题标题】：Synchronize call back in Angular JS在Angular JS中同步回调
【发布时间】：2016-03-12 02:24:28
【问题描述】：

我正在尝试同步两个回调，一个来自服务，一个直接调用。（这是旧代码，请忽略代码质量）

 if($scope.newUser.password == $scope.newUser.password2)
        {
            // search for the user to see if it already exists
            UserValidateService.findUserByEmail($scope.newUser.username, $scope.newUser.email, function(user){
                console.log(user);
                if(user[0]) {
                    alert('email Id already exists ******');
                    return false;
                }
            }).then(function(){ 
                $http.get("/api/user/"+$scope.newUser.username)
                .success(function(newUser) {
                    // if user does not exist, create it new
                    if(newUser.length == 0) {
                        $http.post("/api/user", $scope.newUser)
                        .success(function(newUser){
                            if(newUser == null)
                                alert("Unable to register user");
                            else
                                $location.path( $scope.newUser.username+"/home" );
                        });
                    }
                    else
                    {
                        alert("User already exists");
                    }
                });
            });
        }
        else
        {
            alert("Passwords must match. Try again");
        }

服务：

app.factory('UserValidateService', function($http){

    var findUserByEmail = function (user, email, callback) {
        $http.get("/api/user/"+user+"/email/"+email)
        .success(callback);
    };

    return {
        findUserByEmail: findUserByEmail
    };
});

错误：

TypeError: Cannot read property 'then' of undefined
    at h.$scope.register (user.js:118)
    at angular.js:10567
    at angular.js:18627
    at h.$eval (angular.js:12412)
    at h.$apply (angular.js:12510)
    at HTMLButtonElement.<anonymous> (angular.js:18626)
    at HTMLButtonElement.jQuery.event.dispatch (jquery.js:5095)
    at HTMLButtonElement.elemData.handle (jquery.js:4766)

请告诉我哪里出了问题或者如何使这段代码同步，即调用

【问题讨论】：

UserValidateService.findUserByEmail() 是否返回承诺？
它是一个回调函数：使用服务代码编辑问题。
如果您尝试同步，那么我建议您使用 $q 进行延迟。创建两个 Promise，然后与 $q.all 同步。我找到了一个可以作为示例的 jfiddle：jsfiddle.net/ThomasBurleson/QqKuk
只是为了修复错误，您需要从服务返回承诺。除此之外，还是不明白你说的“同步两个回调”是什么意思

标签： javascript angularjs callback

【解决方案1】：

您的UserValidateService 不返回承诺，它使用来自$http 成功方法的回调。这是一个应该避免的anti-pattern。

转换您的工厂以从$http 服务返回承诺：

app.factory('UserValidateService', function($http){

    var findUserByEmail = function (user, email) {
        return $http.get("/api/user/"+user+"/email/"+email)
    };

    return {
        findUserByEmail: findUserByEmail
    };
});

然后使用promise的.then方法执行回调功能。

var promise = UserValidateService
                  .findUserByEmail($scope.newUser.username,
                                   $scope.newUser.email);

var derivedPromise = promise.then ( function(response){
    console.log(response.user);
    if(response.user[0]) {
        alert('email Id already exists ******');
    });
    //return response for chaining
    return response;
});

后续操作可以链接derivedPromise。

【讨论】：