Fatal编程技术网
  • javascript/
  • Javascript 使用WebApi时处理AngularJS中的错误

Javascript 使用WebApi时处理AngularJS中的错误

javascript angularjs asp.net-web-api error-handling

Javascript 使用WebApi时处理AngularJS中的错误,javascript,angularjs,asp.net-web-api,error-handling,Javascript,Angularjs,Asp.net Web Api,Error Handling,在下面的代码中，我希望处理错误： 401：重定向到登录页面 其他：显示错误消息（在错误消息中接收） 我找不到正确的方法 有什么想法吗 谢谢 Module.js var app; (function () { app = angular.module("studentModule", []); })() Service.js app.service('StudentService', function ($http) { this.getAllStude

在下面的代码中，我希望处理错误：

  • 401：重定向到登录页面
  • 其他：显示错误消息（在错误消息中接收）
我找不到正确的方法

有什么想法吗

谢谢

Module.js

var app;  
(function () {  
    app = angular.module("studentModule", []);  
})()
Service.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文档提供了关于如何编写不同文档的详细信息：

有了拦截器，您现在只需要监听run方法或任何控制器中广播的事件

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>


{{serverError}}
…页面的其余部分
与几乎所有AngularJS代码一样，大部分代码都可以抽象到不同的工厂和服务中，但这应该是一个很好的起点。

您可以使用http拦截器，并在公共场所执行此操作，拦截器是一种方法。@Kris-I定义
studentModule
后，所有JavaScript都可以粘贴到项目中。我在我的答案中添加了更多的内容，包括一些HTML示例，让您开始学习，但实际处理身份验证和显示错误可能超出了这个问题的范围。所有这一切对我来说都很奇怪：）我有：这很好（可能是首选），您不需要更改它。只要您的错误DIV位于初始化
ng应用程序的标记内。我将首先设置
$rootScope.serverError=“哦，不，出了点问题！”
在run块中，但在
$on
事件处理程序之外，只是为了确保它显示在您的页面上。我需要按服务查看拦截器吗？按控制器？不，我们在配置函数中设置它们的原因是它们可以处理整个应用程序的所有请求。任何使用
$HTTP
进行HTTP调用的服务或控制器都将通过我们的拦截器运行任何失败响应。不需要额外的工作。可能会花一些时间学习AngularJS中的
config
和
run
。陡峭的学习曲线，但一旦它点击，你肯定会有成效。祝你好运