使用拦截器处理$http 404s的AngularJS - promise not defined错误
使用拦截器处理$http 404s的AngularJS - promise not defined错误
提问于 2014-02-21 04:14:57
我有一个Angular应用程序，我想为它处理一个API端点的404。关键组件如下所示：
// 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吗？我该如何处理这个问题呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-02-21 07:04:17
因此，我使用新的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模式来解决我的问题。
欢迎提出意见。
Stack Overflow用户
发布于 2014-02-21 04:46:35
我想你拦截器的结构可能坏了。我在这里发布了一个带有示例拦截器(Handle HTTP 302 response from proxy in angularjs)的答案，您可能会发现它很有用。这对我来说每天都很有效。
Stack Overflow用户
发布于 2014-11-27 01:25:04
更容易将参数作为
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21918539
复制相关文章
相似问题