【问题标题】：angular request busy interceptor角度请求忙拦截器
【发布时间】：2016-02-02 09:47:31
【问题描述】：

更新

我想我自己解决了。检查my interceptor that I posted as a solution below。

原创

我想知道是否可以编写一个 http 拦截器，让调用者知道请求的执行情况。

现在，当我想调用我的后端时，我将一个 $http 调用包装在一个包装器中，该包装器设置我传递给它的对象的属性：

publ.wrap = function(f, ctrl){

    ctrl.busy   = true;
    ctrl.error  = false;

    return f()

    .then(function(res){

        ctrl.busy   = false;
        ctrl.result = res;

        return res;

    }).catch(function(err){

        ctrl.busy   = false;
        ctrl.error  = err;
        ctrl.result = undefined;

    })

};



publ.login    = function(args, ctrl){

    publ.wrap(function(){

        return $http.post('http://localhost:3001/authenticate', {
            username : args.username,
            password : args.password
        }).then(function(jwt){

            $cookies.put('token', jwt);
        })
    }, ctrl);
};

在这种情况下，我在登录页面控制器中调用login(authArgs, $scope.loginCtrl)。然后我在我的登录模板中使用loginCtrl.busy、loginCtrl.result 和loginCtrl.error。

我非常希望我对后端的每次调用都设置这些属性并使它们可用于发起请求的视图。

使用这样的包装函数可以完成工作，但我想知道是否可以使用拦截器来完成？在我看来，这样会提供一个更清晰的请求流程，不需要我将所有后端调用显式包装在我的服务中。

现在我阅读了 httpInterceptors，但似乎找不到让它们在用户提供的对象上设置属性的方法。我发现关闭的东西是this article，它有一个示例（时间戳标记（请求和响应拦截器）），它们在request 和response 拦截器阶段向配置对象添加属性。它们没有显示如何访问responseError 阶段或调用者控制器中的配置对象。

任何帮助将不胜感激:)

【问题讨论】：

标签： angularjs angular-http-interceptors

【解决方案1】：

我使用 Angular 事件来处理这样的事情——例如：

    .controller('parentCtrl', function($scope,$rootScope) {
        $rootScope.$on('loading',function(e,_statusObj.loading) {
            $scope.loading = _statusObj.loading;
            if(!!_statusObj.msg) {
                alert(_statusObj.msg);
            }
        });
    })
    .controller('childCtrl', function($scope,$http) {
        $scope.myAjaxCall = function(_url,_data) {
            $scope.$emit('loading',{ loading: true});
            $http.post(_url,_data).success(function(_response) {
                $scope.$emit('loading',{ loading: false });
            })
            .error(function(_error) {
                $scope.$emit('loading',{
                    loading : false,
                    msg     : _error.message
                });
            });
        }
    });

【讨论】：

如果我没记错的话，当同时发送多个请求时，这将无法正常工作。 loading 事件将被发送给所有人，并且没有办法区分它们。此外，代码比我想要的更混乱。

【解决方案2】：

我设法让拦截器工作。显然我们可以在所有拦截器阶段访问配置文件：

/******************************************
    SETUP BUSY/ERROR/DATA HTTP INTERCEPTOR
*******************************************/
.config(function($httpProvider){

    $httpProvider.interceptors.push(function($q) {
      return {

        request  : function(config) {

            if(config.ctrl){
                config.ctrl.busy   = true;
                config.ctrl.error  = false;
                config.ctrl.data   = undefined;
            }

            return config;
        },
        response : function(response) {

            if(response.config && response.config.ctrl){
                response.config.ctrl.busy = false;
                response.config.ctrl.data = response.data;
            }

            return response;
        },

        responseError : function(response){

            // note: maybe use a different error message for different kinds of responses?
            var error = response.status + " "+response.statusText+" - "+response.data;

            if(response.config && response.config.ctrl){
                response.config.ctrl.busy = false;
                response.config.ctrl.error = error;
            }

            return $q.reject(error);
        }
      };
    });

})

【讨论】：