AngularJS - handling errors with promises

Question

I am using a provider to fetch some data via an API in my angular app and then use it in a controller. The API make call to is sometimes down which results in a 500 error. This error gets printed to the console and I don't know how to handle it gracefully.

Here is my provider code:

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;
      }
    }
  }
}

And here is how I use it in my controller:

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

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

How can I handle the 500 error properly, i.e. not throw any error to the console and use the data provided in local storage if any?

Many thanks

This is effectively agnostic to Angular. Closed as duplicate of the error handling question. Also please consider reading about the deferred anti pattern and how to avoid it. Your whole getdata could similarly be `return $http.get(...` since $http already returns promises. — Benjamin Gruenbaum, Sep 23 '14 at 22:58

DeadCalimero · Answer 1 · 2014-09-23T22:56:49.607

1

You can catch the reject of promise like this :

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

or

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

edited Sep 23 '14 at 22:56

answered Sep 23 '14 at 22:51

DeadCalimero

260
1
9

score 0 · Accepted Answer · answered Sep 23 '14 at 22:57

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>

AngularJS - handling errors with promises

2 Answers2