AngularJS с использованием перехватчика для обработки $http 404s - обещает не определенную ошибку
У меня есть приложение Angular, для которого я хочу обрабатывать 404s, которые образуют конечную точку API. Ключевыми компонентами являются:
// 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;
},
}
});
Проблема в том, что я получаю сообщение об ошибке ReferenceError: promise is not defined at response
. Это потому, что ConcernService
отбрасывает promise
? Как мне с этим справиться?
Любая помощь очень ценится.
Ответы
Ответ 1
Итак, мое решение, которое работает, используя новый синтаксис interceptor
, выглядит следующим образом:
// 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>
Это упрощенная версия, но демонстрирует, как я использовал шаблон interceptor
для решения моей проблемы.
Комментарии приветствуются.
Ответ 2
Я думаю, что структура вашего перехватчика может быть отключена. Я отправил ответ с образцом перехватчика здесь (Обработать HTTP 302 ответ от прокси в angularjs), который вы можете найти полезным. Он работает для меня ежедневно.
Ответ 3
Легче передать параметр как
<div class="fullPortfolio" ng-show="projectId.length">Project Id passed</div>
а затем, когда id проекта не существует
<div class="fullPortfolio" ng-show="!projectId.length">Project Id is not exist</div>