在Angular UI路由器中无法解析数据时的错误处理

debugcn 发表于 Dev

Shaohao Lin

我resolve在移动状态之前使用angular-ui-router从服务器获取数据。我想通知用户请求是否失败。我有将响应错误的请求失败的服务。我的问题是如何检测ui-router中的故障resolve并触发一些Modal服务（如弹出窗口）。

我已经在线阅读了一些相关的帖子，但是我仍然对如何实现它感到困惑。先谢谢了！

配置和服务：

angular.module('myApp',['ui.router', 'ngAnimate', 'ui.bootstrap'])
  .config(function ($stateProvider, $locationProvider) {  
      $locationProvider.html5Mode(true);
      $stateProvider
          .state('customer', {
              url: '/customer',
              templateUrl: '/customer.html',
              controller: 'CustomerCtrl',
              resolve: {
                  /* 
                   * How to inject CustomerService here
                   * How to catch the server error
                   * How to trigger a popup
                   */
                  data: cusomter_data
              }
           });

  })
  .service('CustomerService', function($http, $q) {
      return ({
          getGeneral: getGeneral
      });

      function getGeneral(customer_id) {
          var request = $http({
              method: "get",
                  url: '/customer',
                  params: {
                      customer_id: customer_id
                  }
          });
          return (request.then( handleSuccess, handleError));
      }

      function handleError (response){
          if (!angular.isObject(response.data) || !response.data.message) {
              return($q.reject("Failed to retrieve customer information."));
          } 
          return($q.reject(response.data.message));
      }

      function handleSuccess(response) {
          return (response.data);
      }
  });

Shaohao Lin

经过研究，我找到了一个解决方案，方法是创建一个errorModal服务并将其注入以解决。这是我的解决方案。

$stateProvider
    .state('customer', {
        url: '/customer',
        templateUrl: '/customer.html',
        controller: 'CustomerCtrl',
        resolve: {
            data: function(CustomerService, SelectedCustomerService, errorModalService) {
                var shared = SelectedCustomerService;
                return CustomerService.getData(shared.customerid).then(
                    function (data) { return data; }, 
                    function(error) { 
                        var modalOptions = {
                            closeButtonText: 'Close',
                            headerText: 'Customer Error',
                            bodyText: error
                        };
                        errorModalService.showModal({}, modalOptions);
                    }
                );
            }
        }
     });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。