我有一个Angular应用程序，我想处理404的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,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没有被定义为响应。这是因为关注服务违背承诺吗？我该怎么处理这个？
任何帮助非常感谢。
所以我的解决方案使用新的拦截器语法如下：
原文链接：https://www.f2er.com/angularjs/144043.html// interceptors.js
.factory('httpRequestInterceptor',$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,$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>
这是一个简化版本，但演示了我如何使用拦截器模式来解决我的问题。
欢迎评论。
