AngularJS - 用承诺处理错误[重复]答案

【问题标题】：AngularJS - handling errors with promises [duplicate]AngularJS - 用承诺处理错误[重复]
【发布时间】：2014-11-18 06:59:27
【问题描述】：

我正在使用提供程序通过我的 Angular 应用程序中的 API 获取一些数据，然后在控制器中使用它。 API 调用有时会关闭，这会导致 500 错误。这个错误被打印到控制台，我不知道如何优雅地处理它。

这是我的提供商代码：

function myPvdr() {
  this.getUrl = function() {
    return 'http://path/to/my/API';
  };
  this.$get = function($q, $http) {
    var self = this;
    return {
      getData: function(points) {
        var d = $q.defer();
        $http({
          method: 'GET',
          url: self.getUrl(),
          cache: true
        }).success(function(data) {
          d.resolve(data);
        }).error(function(err) {
          d.reject(err);
        });
        return d.promise;
      }
    }
  }
}

这是我在控制器中使用它的方式：

function myCtrl($scope, myProvider, localStorageService) {
  $scope.myData = localStorageService.get('data') || {};

  myProvider.getData()
    .then(function(data) {
      localStorageService.set('data', data);
      $scope.data = data;
    });
}

如何正确处理 500 错误，即不向控制台抛出任何错误并使用本地存储中提供的数据（如果有）？

非常感谢

【问题讨论】：

这实际上与 Angular 无关。作为错误处理问题的副本关闭。还请考虑阅读有关延迟反模式以及如何避免它的信息。您的整个 getdata 可能同样是 return $http.get(...，因为 $http 已经返回承诺。

标签： javascript angularjs promise

【解决方案1】：

你可以像这样捕获 promise 的拒绝：

myProvider.getData()
 .then(function(data) {
    // promise resolved, data treatment
 }, function(error) {
    // promise rejected, display error message
 });

或

myProvider.getData()
 .then(function(data) {
    // promise resolved, data treatment
  })
 .catch(function(error) {
    // promise rejected, display error message
  });

【讨论】：

【解决方案2】：

var app = angular.module('app', []);



function myProvider($http, $q) {
  this.getUrl = function() {
    return 'http://path/to/my/API';
  };
  
      
    this.getdata =   function(points) {
        var d = $q.defer();
        $http({
          method: 'GET',
          url: this.getUrl(),
          cache: true
        }).then(function(data) {
          d.resolve(data);
        },function(err) {
          d.reject(err);
        });
        return d.promise;
      
    };
  return this;
}
app.factory('myProvider', myProvider);
app.controller('firstCtrl', function($scope,myProvider){
  
 // $scope.myData = localStorageService.get('data') || {};

   getdata = function() {
     
     myProvider.getdata()
    .then(function(data) {
      localStorageService.set('data', data);
      $scope.data = data;
    }, 
       //handle error   
       function(e){
       alert("Error " + e.status);
       
       
     });
   };
  getdata();
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="firstCtrl">

      </div>
</body>

【讨论】：