angularjs中的500个http状态路由答案

【问题标题】：500 http status routing in angularjsangularjs中的500个http状态路由
【发布时间】：2016-05-02 22:56:09
【问题描述】：

我有一个 angularjs 应用程序，我正在使用 ui-router 进行路由。

我的状态如下：

.state('core.page500', {
        url: '/page500',
        templateUrl: 'views/tmpl/pages/page500.html'
      })

而且我希望每当某个 api 调用在我的应用程序中返回 500 作为 HTTP 状态时，将我路由到该状态。

这在 AngularJS 中可行吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

看看一个名为Interceptors 的概念。

您基本上是在创建一个服务，每次调用 $http 都会触发该服务。如下所示：

 angular
  .module( 'interceptors', [])
  .factory('HttpInterceptors', HttpInterceptors);

HttpInterceptors.$inject = ['$q', '$injector'];

function HttpInterceptors($q, $injector) {
  return {
    // On request success
    request: function (config) {
      // console.log(config); // Contains the data about the request before it is sent.

      // Return the config or wrap it in a promise if blank.
      return config || $q.when(config);
    },

    // On request failure
    requestError: function (rejection) {
      //console.log('rejection', rejection); // Contains the data about the error on the request.

      // Return the promise rejection.
      return $q.reject(rejection);
    },

    // On response success
    response: function (response) {
      // console.log(response); // Contains the data from the response.

      // Return the response or promise.
      return response || $q.when(response);
    },

    // On response failture
    responseError: function (rejection) {
      if(rejection.status === 500) {
        var state = $injector.get('$state');
        state.go('core.page500');
      }

      // Return the promise rejection.
      return $q.reject(rejection);
    }
  };
}

然后，将其推送到应用程序 .config 部分的 $routeProvider 中：

$httpProvider.interceptors.push('HttpInterceptors');

【讨论】：

【解决方案2】：

是的，这是可能的。你需要做的是创建一个自定义拦截器工厂，它检查 response.status 并在 status === 500 时运行重新路由代码，并将其附加到 angularJS http 拦截器。

文档：https://docs.angularjs.org/api/ng/service/$http

尝试使用谷歌搜索 angularJS 自定义 http 拦截器以获取详细实现。

【讨论】：

【解决方案3】：

您可以使用 Http 拦截器。我没有对此进行测试，所以如果它不起作用，请告诉我，但这非常接近您的需要：

angular.module('YourModule').factory('errorHttpInterceptor', ['$injector', '$q', '$state', errorHttpInterceptor]);

    function errorHttpInterceptor($injector, $q, $state) {
        return {
            responseError: function (error) {
                if (error.status === 500) {
                   $state.go('core.page500');
                }
                return $q.reject(error);
            }
        };
    }

然后将其添加到http管道中：

angular.module('YourModule').config(['$httpProvider', config]);

function config($httpProvider) {
   $httpProvider.interceptors.push('errorHttpInterceptor');
}

这将捕获所有 500 个错误并将用户发送到您的错误页面。

【讨论】：