AngularJS UI 路由器处理 404s

Question

我有一个带有服务的应用程序，它包装了我的 API 调用:

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) {
                console.log('ConcernService.get status',status);
                defer.reject(status);
            });
        return defer.promise;
    },

我正在使用 UI-Router 在状态之间转换:

concernsApp

    .config( function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/404/");


        $stateProvider.state('project', {
        url: '/project/:projectId/',
        resolve: {
            project: function ($stateParams, ConcernService) {
                return ConcernService.get('projects/', $stateParams.projectId);
            },
        },
        views: {
            ...
        }
    });

我正在不再使用普通的 AngularJS 路由器，而且我很难理解如何实现 404。我可以看到 ConcernService扔console.log状态为拒绝，但如何在状态路由器中捕获它？

Answer 1

otherwise()仅当没有其他路由匹配时才会调用规则。你真正想要的是拦截$stateChangeError事件，这是在状态转换中出现问题时触发的事件(例如，解析失败)。您可以在 state change event docs 中阅读更多相关信息。 .

您尝试做的最简单的实现是这样的:

$rootScope.$on('$stateChangeError', function(event) {
  $state.go('404');
});

此外，由于 $http本身是建立在 promise 之上的(它是 resolve 解决的)，你的 ConcernService方法可以简化为单行(我意识到您出于调试目的对其进行了扩展，但您可以轻松地将其链接起来，仅供引用):

var ConcernService = {

  get: function (items_url, objId) {
    return $http.get(api_url + items_url + objId);
  }
}