AngularJS intercept all $http requests

Question

I can't seem to get the $httpProvider.interceptors to actually intercept. I created a sample on JSFiddle that logs when the interceptor is run and when the $http response is successful. The request interceptor is run after the response is already returned as successful. This seems a bit backwards.

I can't use transformRequest because I need to alter the params in the config. That part isn't shown in the sample.

I'm using AngularJS 1.1.5

http://jsfiddle.net/skeemer/K7DCN/1/

Javascript

var myApp = angular.module('myApp', []);

myApp.factory('httpInterceptor', function ($q) {
    return {
        request: function (config) {
            logIt('- Modify request');
            return config || $q.when(config);
        }
    };
});

myApp.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});

function MyCtrl($scope, $http) {
    // Hit a server that allows cross domain XHR
    $http.get('http://server.cors-api.appspot.com/server?id=8057313&enable=true&status=200&credentials=false')
    .success(function (data) {
        //logIt(data[0].request.url);
        logIt('- GET Successful');
    });

    $scope.name = 'Superhero';
}


// Just the logging
var logs = document.getElementById('logs');

function logIt(msg) {
    var e = document.createElement('div');
    e.innerHTML = msg;
    logs.insertBefore(e, logs.firstChild);
}

HTML

<div ng-controller="MyCtrl">Hello, {{name}}!</div>
<br/>
<div id="logs"></div>

Renaud · Accepted Answer · 2013-12-17 11:33:02Z

20

If you want the option to accept/reject a request at interception time you should be using $httpProvider.responseInterceptors, see example below:

$httpProvider.responseInterceptors.push(function($q) {
    return function(promise){
        var deferred = $q.defer();
        promise.then(
            function(response){ deferred.reject("I suddenly decided I didn't like that response"); },
            function(error){ deferred.reject(error); }
        );
        return deferred.promise;
    };
});

EDIT Didn't read your comment, indeed responseInterceptors is now obsolete an that's how you do it instead:

$httpProvider.interceptors.push(function($q) {
    return {
        request: function(config){ return config; },
        response: function(response) { return $q.reject(response); }
    };
});

I learned something useful, thanks

edited Dec 17, 2013 at 11:33

answered Dec 17, 2013 at 11:17

Renaud

4,6998 gold badges46 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Pugh · Accepted Answer · 2013-06-08 02:17:00Z

9

The request interceptor isn't running after the data is returned. It's running before. Your logIt function inserts the newest message at the top. If you change your code to use the $log service, you'll see that the interceptor runs first.

answered Jun 8, 2013 at 2:17

Mike Pugh

6,7522 gold badges30 silver badges25 bronze badges

1 Comment

skeemer Over a year ago

Wow... feeling dumb now. Thanks, though! Figured out in my other code that I was using the deprecated $httpProvider.responseInterceptors instead of $httpProvider.interceptors.

Collectives™ on Stack Overflow

AngularJS intercept all $http requests

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related