AngularJS using an interceptor to handle $http 404s - promise not defined error
angular-http, angularjs
Solution
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.
Problem
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?