angular请求忙拦截器

Question

更新

我想我自己解决了。检查 .

原创

我想知道是否可以编写一个 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，它有一个示例（Timestamp Marker (request and response interceptors)），他们在 request 和 response 拦截器中向配置对象添加属性 stages.They 不显示如何在 responseError 阶段或调用者控制器中访问配置对象。

任何帮助将不胜感激:)

Answer 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
                });
            });
        }
    });

Answer 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);
        }
      };
    });

})

angular请求忙拦截器

angular request busy interceptor

angularjs

angular-http-interceptors

更新

原创