$httpProvider.interceptors SO - 28803946

by manoj

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<button ng-click="success()">Success</button>
<button ng-click="fail()">Fail</button>
<pre>{{data || json}}</pre>

CSS

.loading{background: red;}

JavaScript

var app = angular.module('my-app', [], function () {})

app.controller('AppController', function ($scope, $http) {
    $scope.success = function () {
        $http.post('/echo/json/', {
            json: '{}',
            delay: 3
        }).success(function (data) {
            $scope.data = data;
        }).error(function () {
            $scope.data = 'error 1';
        });
    }
    $scope.fail = function () {
        $http.get('http://xyx.com', {
            json: '{}',
            delay: 4
        }).error(function () {
            $scope.data = 'error 2';
        });
    }
})

var interceptor = function ($q, $location) {
    return {
        request: function (config) {
            angular.element(document.body).addClass('loading');
            console.log(config);
            return config;
        },

        response: function (result) {
            angular.element(document.body).removeClass('loading');
            console.log('Repos:', result);
            return result;
        },

        responseError: function (rejection) {
            angular.element(document.body).removeClass('loading');
            console.log('Failed with', rejection.status, 'status', rejection);
            if (rejection.status == 403) {
                $location.url('/login');
            }

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

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push(interceptor);
});