gpt4 book ai didi

javascript - 使用 WebApi 时处理 AngularJS 中的错误

转载 作者:行者123 更新时间:2023-11-29 19:26:30 25 4
gpt4 key购买 nike

在下面的代码中,我想处理错误:

  • 401:重定向到登录页面
  • 其他:显示错误信息(在错误信息中收到)

我找不到执行此操作的正确方法。

有什么想法吗?

谢谢,

模块.js

var app;  
(function () {
app = angular.module("studentModule", []);
})()

服务.js

app.service('StudentService', function ($http) {    
this.getAllStudent = function () {
return $http.get("http://myserver/api/Student/");
}
});

Controller.js

app.controller('studentController', function ($scope, StudentService) { 

function GetAllRecords() {
var promiseGet = StudentService.getAllStudent();
promiseGet.then(function (pl) { $scope.Students = pl.data },
function (errorPl) {
$log.error('Some Error in Getting Records.', errorPl);
});
}

});

最佳答案

与大多数问题一样,在 AngularJS 中有许多不同的方法来处理来自 AJAX 请求的错误。正如已经指出的那样,最简单的方法是使用 HTTP 拦截器。这可以处理身份验证和错误。

app.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push(['$rootScope', '$q', function($rootScope, $q) {

return {
responseError: function(rejection) {
var deferred;

// If rejection is due to user not being authenticated
if ( rejection.status === 401 ) {

$rootScope.$broadcast('unauthenticated', rejection);

// Return a new promise since this error can be recovered
// from, like redirecting to login page. The rejection and
// and promise could potentially be stored to be re-run
// after user is authenticated.
deferred = $q.defer();
return deferred.promise;
}

$rootScope.$broadcast('serverError', rejection);
// Just reject since this probably isn't recoverable from
return $q.reject(rejection);

}
}
};
}]);

上述拦截器是使用匿名函数创建的,但工厂可用于处理一个或多个不同的拦截器。 AngularJS 文档有关于如何编写不同的文档的不错信息:https://docs.angularjs.org/api/ng/service/$http#interceptors

拦截器就位后,您现在只需在运行方法或任何 Controller 中监听广播事件即可。

app.run(['$rootScope', '$location', function($rootScope, $location) {

$rootScope.$on('unauthenticated', function(response) {
// Redirect to login page
$location.path('/login');
});

$rootScope.$on('serverError', function(response) {
// Show alert or something to give feedback to user that
// server error was encountered and they need to retry
// or just display this somewhere on the page
$rootScope.serverError = response.data.errorMessage;
});
}]);

在你看来:

<body ng-app="studentModule">
<div id="server_error" ng-if="!!serverError">{{serverError}}</div>
...rest of your page
</body>

像几乎所有 AngularJS 代码一样,其中大部分可以抽象到不同的工厂和服务中,但这应该是一个很好的起点。

关于javascript - 使用 WebApi 时处理 AngularJS 中的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30482952/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com