AngularJS using an interceptor to handle $http 404s - promise not defined error

Question

I have an Angular app, for which I want to handle 404s form an API end point. The key components are like so:

// app.js

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

myApp.config( function ($httpProvider, $interpolateProvider, $routeProvider) {
  $httpProvider.interceptors.push('httpRequestInterceptor');

  $routeProvider
    ...
    .when('/project/:projectId', {
        templateUrl : 'partials/project_detail.tmpl.html',
        controller: 'ProjectDetailCtrl',
        resolve: {
            project: function ($route, ConcernService) {
                return ConcernService.get('projects/', $route.current.params.projectId);
            },
        }
    });
});


// interceptors.js

myApp.factory('httpRequestInterceptor', function ($q, $location) {
  return {
    response: function(response){
      return promise.then(
        function success(response) {
          return response;
        },
        function error(response) {
          if(response.status === 404){
            $location.path('/404');
            return $q.reject(response);
          }
          else{
            return $q.reject(response); 
          }
        }
      );
    }
  };
});


// services.js

myApp.factory('ConcernService', function ($http, $q) {

var ConcernService = {
    ...
    get: function (items_url, objId) {
        var defer = $q.defer();
        $http({method: 'GET', 
            url: api_url + items_url + objId}).
            success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data, status, headers, config) {
                // when API not found, status == 404 
                console.log('ConcernService.get status',status);
                defer.reject(status);
            });
        console.log('ConcernService.get promise',defer.promise);
        return defer.promise;
    },
}
});

The issue is I am getting an error of ReferenceError: promise is not defined at response. Is this because the ConcernService defers the promise? How should I deal with this?

Looks like you're mixing interceptors with response interceptors (deprecated). The error you're getting is at return promise.then(... promise isn't defined there. docs.angularjs.org/api/ng/service/$http — Anthony Chu
– Anthony Chu, Commented Feb 20, 2014 at 20:51
You are using depreceated definition kindly refer to new syntax — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented Feb 20, 2014 at 20:53
Can you give me some idea of what this would look like using the new inceptor syntax? — Darwin Tech
– Darwin Tech, Commented Feb 20, 2014 at 22:16

demisx · Accepted Answer · 2015-02-06 22:23:46Z

37

So, my solution which works, using the new interceptor syntax is as follows:

// interceptors.js

.factory('httpRequestInterceptor', function ($q, $location) {
    return {
        'responseError': function(rejection) {
            // do something on error
            if(rejection.status === 404){
                $location.path('/404/');                    
            }
            return $q.reject(rejection);
         }
     };
});


// app.js

myApp.config( function ($httpProvider, $interpolateProvider, $routeProvider) {
    $httpProvider.interceptors.push('httpRequestInterceptor');

    $routeProvider
    ...
    .when('/404/:projectId', {
        templateUrl : 'partials/404.tmpl.html',
        controller: '404Ctrl',
        resolve: {
            project: function ($route) {
                // return a dummy project, with only id populated
                return {id: $route.current.params.projectId};
            }
        }
    });
});


// 404.tmpl.html

...

<h1>Oh No! 404.</h1> 
<p>Project with ID {{ project.id }} does not exist.</p>

This is a simplified version, but demonstrates how I used the interceptor pattern to solve my issue.

Comments are welcome.

edited Feb 6, 2015 at 22:23

demisx

7,9164 gold badges48 silver badges45 bronze badges

answered Feb 20, 2014 at 23:04

Darwin Tech

19k41 gold badges116 silver badges192 bronze badges

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

2 Comments

ericpeters0n Over a year ago

Does the $location.path in the interceptor factory actually update the location? This didn't work for me. I found it necessary to use '$window.location.href=...'

Amit Over a year ago

This answer has one critical problem. The return statement "return $q.reject(rejection);" should be outside IF block otherwise it would break the interceptor chain.

Community · Accepted Answer · 2017-05-23 11:53:59Z

2

I think the structure of you interceptor might be off. I posted an answer with a sample interceptor here (Handle HTTP 302 response from proxy in angularjs) that you might find useful. It works for me on a daily basis.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 20, 2014 at 20:46

MBielski

6,6103 gold badges36 silver badges46 bronze badges

3 Comments

Darwin Tech Over a year ago

Actually, I pulled the interceptor code from here: djds4rce.wordpress.com/2013/08/13/… Only changed the 401 to 404.

Darwin Tech Over a year ago

Also in your example, the interceptor gives out the partial and Controller. I would prefer to handle the /404 using ngRoute in the app config..

MBielski Over a year ago

Yeah, we raise an alert dialog when we get 400 errors, hence the partial and controller. Obviously handling the 404 on the route would be a bit different.

Digital Legend · Accepted Answer · 2014-11-26 17:25:04Z

0

Is just easier to pass parameter as

<div class="fullPortfolio" ng-show="projectId.length">Project Id passed</div>

and then when project id is not exist

<div class="fullPortfolio" ng-show="!projectId.length">Project Id is not exist</div>

answered Nov 26, 2014 at 17:25

Digital Legend

1491 silver badge14 bronze badges

Collectives™ on Stack Overflow

AngularJS using an interceptor to handle $http 404s - promise not defined error

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related