回调如何在AngularJS中调用REST服务?

时间:2016-01-16 00:08:15

标签: javascript angularjs

我正在研究AngularJS和REST。代码示例在身份验证功能中重复使用单词callback回调是JavaScript或Angular中的关键字吗?或者callback只是在此代码中创建的自定义变量? callback如何在下面的代码中工作? Google搜索callback和AngularJS无法生成可用的结果。 The code for the AngularJS module in question can be read at this link,其中还包含示例应用的所有代码。

以下是模块代码本身:

angular.module('auth', []).factory( 'auth',

    function($rootScope, $http, $location) {

        enter = function() {
            if ($location.path() != auth.loginPath) {
                auth.path = $location.path();
                if (!auth.authenticated) {
                    $location.path(auth.loginPath);
                }
            }                   
        }

        var auth = {

            authenticated : false,

            loginPath : '/login',
            logoutPath : '/logout',
            homePath : '/',
            path : $location.path(),

            authenticate : function(credentials, callback) {

                var headers = credentials && credentials.username ? {
                    authorization : "Basic "
                            + btoa(credentials.username + ":"
                                    + credentials.password)
                } : {};

                $http.get('user', {
                    headers : headers
                }).success(function(data) {
                    if (data.name) {
                        auth.authenticated = true;
                    } else {
                        auth.authenticated = false;
                    }
                    callback && callback(auth.authenticated);
                    $location.path(auth.path==auth.loginPath ? auth.homePath : auth.path);
                }).error(function() {
                    auth.authenticated = false;
                    callback && callback(false);
                });

            },

            clear : function() {
                $location.path(auth.loginPath);
                auth.authenticated = false;
                $http.post(auth.logoutPath, {}).success(function() {
                    console.log("Logout succeeded");
                }).error(function(data) {
                    console.log("Logout failed");
                });
            },

            init : function(homePath, loginPath, logoutPath) {

                auth.homePath = homePath;
                auth.loginPath = loginPath;
                auth.logoutPath = logoutPath;

                auth.authenticate({}, function(authenticated) {
                    if (authenticated) {
                        $location.path(auth.path);
                    }
                })

                // Guard route changes and switch to login page if unauthenticated
                $rootScope.$on('$routeChangeStart', function() {
                    enter();
                });

            }

        };

        return auth;

    });

其他信息:

基于@ okonyk的回复,我包含来自调用auth.authenticate()函数的不同MODULE的代码:

$scope.login = function() {
    auth.authenticate($scope.credentials, function(authenticated) {
        if (authenticated) {
            //do some stuff
             $scope.error = false;
         } else { 
            $scope.error = true;
        }
    })
}

那么从login()auth.authenticate($scope.credentials, function(authenticated)的来电如何运作? function(authenticated)参数是否发送了一个确定auth.authenticate()内部功能的布尔值?如果是这样,你能明确吗?我可以把它拼凑起来。例如,true可能表示执行回调,而false可能表示注释要执行回调,但这有助于解释它。 You can read the code in the sample app for the other module with the login() method by clicking on this link

2 个答案:

答案 0 :(得分:7)

Here是一个很好的解释:

  

回调函数,也称为高阶函数,是一个传递给另一个函数的函数(让我们将其他函数调用“otherFunction”)作为参数,并在内部调用(或执行)回调函数另一个功能。回调函数本质上是一种模式(对常见问题的既定解决方案),因此,回调函数的使用也称为回调模式。

callback不是关键字,它只是传递给函数的参数名称,您可以随意调用它(callbackcb非常常见)。

我将尝试在超简单的自定义构建回调函数的示例中解释它:

function useAsCallback(string){
  console.log("callback is being executed with passed parameter: " + string)
}

function main(param, callback){
  callback(param)
}

main(123456, useAsCallback)

如果你运行它,它会打印: callback is being executed with passed parameter: 123456

回调模式通常用于处理JavaScript异步行为。

编辑:更具体的例子:

谈论您的代码段... 让我们说您将工厂注入控制器。

现在您已公开auth.authenticate方法。您必须传递两个参数(credentials, callback)

auth.authenticate({username: Joe, password: 123456}, function(authStatus){
  if(authStatus){
    console.log("Successfully authenticated")
  }else{
    console.log("Access denied")
  }
});

我们刚刚将匿名函数作为callback方法的auth.authenticate参数传递。

编辑:回复'其他信息':

看起来可能存在一些误解。你在问:

  

函数(authenticated)参数是否发送了一个布尔值来确定auth.authenticate()中的功能

事情就是这样,完全相反:auth.authenticate()将值传递给'function(authenticated)',这是一个匿名函数。它发生在此时:callback && callback(auth.authenticated); - .successcallback && callback(false); - .error

答案 1 :(得分:0)

基本上写一些像

这样的东西
callback && callback(auth.authenticated);

callback && callback(false);

表示如果callback存在,则调用它。

简单的例子:

function foo () {
   console.log('foo');
   return 'Fighting foo!';
}

foo && foo();

它只是一种语言结构,一种奇怪的结构,而不是一种可读性很强的实践。此代码还暗示调用foo()的结果应该有效,但永远不会处理。我会使用一个简单的if语句。