angularjs http interceptor class (ES6) loses binding to 'this'

The context (this) is lost because the Angular framework only keeps references to the handler functions themselves, and invokes them directly without any context, as alexpods has pointed out.

I recently wrote a blog post about writing $http interceptors using TypeScript, which also applies to ES6 classes: AngularJS 1.x Interceptors Using TypeScript.

To summarise what I have discussed in this post, in order to not lose this in your handlers, you'll have to define the methods as arrow functions, effectively putting the functions directly inside of the class's constructor function in the compiled ES5 code.

class AuthenticationInterceptor {    /* ngInject */    constructor($q, $window) {        this.$q = $q;        this.$window = $window;    }    responseError = (rejection) => {        var authToken = rejection.config.headers.Authorization;        if (rejection.status === 401 && !authToken) {            let authentication_url = rejection.data.errors[0].data.authenticationUrl;            this.$window.location.replace(authentication_url);            return this.$q.defer(rejection);        }        return this.$q.reject(rejections);    }}

If you really insist on having your interceptor written as a fully prototype-based class, you could define a base class for your interceptor and extend it. The base class would replace the prototype interceptor functions with instance methods, so we can write our interceptors like this:

class HttpInterceptor {  constructor() {    ['request', 'requestError', 'response', 'responseError']        .forEach((method) => {          if(this[method]) {            this[method] = this[method].bind(this);          }        });  }}class AuthenticationInterceptor extends HttpInterceptor {    /* ngInject */    constructor($q, $window) {        super();        this.$q = $q;        this.$window = $window;    }    responseError(rejection) {        var authToken = rejection.config.headers.Authorization;        if (rejection.status === 401 && !authToken) {            let authentication_url = rejection.data.errors[0].data.authenticationUrl;            this.$window.location.replace(authentication_url);            return this.$q.defer(rejection);        }        return this.$q.reject(rejections);    }}

Look at these lines of source code:

// apply interceptorsforEach(reversedInterceptors, function(interceptor) {    if (interceptor.request || interceptor.requestError) {        chain.unshift(interceptor.request, interceptor.requestError);    }    if (interceptor.response || interceptor.responseError) {        chain.push(interceptor.response, interceptor.responseError);    }});

When interceptor.responseError method is pushed into chain it looses its context (just function is pushed, without any context);

Later here it will be added to promise as reject callback:

while (chain.length) {    var thenFn = chain.shift();    var rejectFn = chain.shift();    promise = promise.then(thenFn, rejectFn);}

So if promise will be rejected, rejectFn(your responseError function) will be executed as an ordinary function. In this case this references to window if script is being executed in non-strict mode, or equals null otherwise.

IMHO Angular 1 was written with ES5 consideration, so I think using it with ES6 is not a good idea.

This is exactly the same problem I'm experiencing, however,I found a workaround by setting the 'this' in a self variable just like solving the scoping issue on es5, and it works fine:

let self;class AuthInterceptor{   constructor(session){       self = this;       this.session = session;   }   request(config){       if(self.session) {           config.headers = self.session.getSessionParams().headers;        }       return config;   }   responseError(rejection){       if(rejection.status == 401){       }       return rejection;   }}export default AuthInterceptor;