CODEWITHSUNDEEP
angularjsngresourceangular-http-interceptorsangularjs-ng-resource
kishorekumaru
kishorekumaru

Reputation: 1578

How to abort or cancel an Angularjs $resource request and override the response by a local data

In one of my new projects I am using AngularJS $resources for http calls. I have requirement to show local data (from SQLite) when there is no internet connection.

I have clustered my obstacles by the following steps, and created sample code down below

var servicetest = angular.module('servicetest', ['ngResource'])
.factory('interceptors' ,function($rootScope, offlineCntrl){
  return {
      'request':function(request){
        if(!offlineCntrl.isOnline()){
          //there wont be a server call
          request.url='';
          //Abort the request
          request.timeout;
        }else{
          return request;
        }
      },
   
     'response':function(response){
        if(!offlineCntrl.isOnline()){
           offlineCntrl.assignLocal(request).then(function(data){
            //Get the local data here.
            // Have to pass this data to my response
            // At this stage I am getting an error attached below
            response.data = data;
            return response;
          })
          
        }else{
         return response;
        }
     }
   }
})
.config(function($httpProvider){
  $httpProvider.interceptors.push('interceptors');
})
.factory('offlineCntrl', function($q, $timeout){
  return {
    isOnline: function(){
      return navigator.onLine;
    },
    assignLocal:function(request){
      var defer = $q.defer();
      $timeout(function(){
        defer.resolve({title:"local", body:"Local local data context"});
      })
      return defer.promise;
    }
  }
})
.factory('CloudSerivce', function($resource){
  return $resource('https://jsonplaceholder.typicode.com/posts/:id', {
    id:'@id'
  }, {
     get:{
       method:"GET",
			 isArray:false,
			 cancellable: true
     }
  })
})
.controller('mainCntrl', function($scope, CloudSerivce){
  $scope.data = {};

  $scope.getCloudService = function(){
    CloudSerivce.get({id:1}).$promise.then(function(data){
      //It should receive local data if there is no network
      $scope.data = data;
    }, function(err){
      console.log(err)
    })
  }

})
<html ng-app="servicetest">
  <body ng-controller='mainCntrl'>
    <h1>{{data.title}}</h1>
    <p>{{data.body}}</p>
    <button ng-click='getCloudService()'>
      GET ITEMS
    </button>
    <h4>Try the button disabling your internet connection</h4>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</html>

I am getting an error when I try to return the response with deferred promise event.

 TypeError: Cannot read property 'headers' of undefined
at f (angular.js:7520)
at C (angular.js:10924)
at angular.js:11010
at h.$eval (angular.js:11930)
at h.$digest (angular.js:11756)
at a.$apply (angular.js:12036)
at HTMLButtonElement.<anonymous> (angular.js:17871)
at angular.js:2612
at q (angular.js:309)
at HTMLButtonElement.c (angular.js:2611)

I can do it by bubbling up a $rootScope emitter and catch it within the controller, but I believe the easiest way is to hack the ngResource (CloudService $promise event) response after aborting the request. So that I can keep the controller getCloudService function as it is, which can work on offline and online mode.

Upvotes: 0

Views: 1215

Answers (3)

Alexey
Alexey

Reputation: 26

Need to do something like that

.factory('interceptors' ,function($rootScope, offlineCntrl){
        return {
          'request':function(request){
            if(!offlineCntrl.isOnline()){
              //there wont be a server call
              request.url='';
              //Abort the request
              request.timeout;
            }else{
              return request;
            }
          },

          'response':function(response){
            const deferred = $q.defer();
            if(!offlineCntrl.isOnline()){
              offlineCntrl.assignLocal(request).then(function(data){
                deferred.resolve(data);
              });

            }else deferred.resolve(response);
            return deferred.promise;
          }
        }
      })

Upvotes: 1

kishorekumaru
kishorekumaru

Reputation: 1578

The following work around worked out.

var servicetest = angular.module('servicetest', ['ngResource'])
.factory('interceptors' ,function($rootScope, offlineCntrl, $q){
  return {
      'request':function(request){
        if(!offlineCntrl.isOnline()){
          //there wont be a server call
          request.url='';
          //Abort the request
          request.timeout;
        }else{
          return request;
        }
      },
   
     'response':function(response){
        if(!offlineCntrl.isOnline()){
           var deferred = $q.defer();
           offlineCntrl.assignLocal(request).then(function(data){
            //Get the local data here.
            // Have to pass this data to my response
            // At this stage I am getting an error attached below
            response = data;
            return deferred.resolve(response);
          })
          return ( deferred.promise );
        }else{
         return response;
        }
     }
   }
})
.config(function($httpProvider){
  $httpProvider.interceptors.push('interceptors');
})
.factory('offlineCntrl', function($q, $timeout){
  return {
    isOnline: function(){
      return navigator.onLine;
    },
    assignLocal:function(request){
      var defer = $q.defer();
      $timeout(function(){
        defer.resolve({title:"local", body:"Local local data context"});
      })
      return defer.promise;
    }
  }
})
.factory('CloudSerivce', function($resource){
  return $resource('https://jsonplaceholder.typicode.com/posts/:id', {
    id:'@id'
  }, {
     get:{
       method:"GET",
			 isArray:false,
			 cancellable: true
     }
  })
})
.controller('mainCntrl', function($scope, CloudSerivce){
  $scope.data = {};

  $scope.getCloudService = function(){
    CloudSerivce.get({id:1}).$promise.then(function(data){
      //It should receive local data if there is no network
      $scope.data = data;
    }, function(err){
      console.log(err)
    })
  }

})
<html ng-app="servicetest">
  <body ng-controller='mainCntrl'>
    <h1>{{data.title}}</h1>
    <p>{{data.body}}</p>
    <button ng-click='getCloudService()'>
      GET ITEMS
    </button>
    <h4>Try the button disabling your internet connection</h4>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</html>

Upvotes: 0

Aravind
Aravind

Reputation: 41571

You made a mistake here! 

$scope.getCloudService = function(){
    CloudSerivce.get({id:1}).$promise.then(function(response){
      //It should receive local data if there is no network
      $scope.data = response.data;//modified
    })
  }

Also to handle the error case you should be using somehting like this?

 $scope.getCloudService = function(){
        CloudSerivce.get({id:1}).$promise.then(function(response){
          //It should receive local data if there is no network
          $scope.data = response.data;//modified
        }),function(error){
             //ERROR HANDLING 
        });
 }

Upvotes: 1

Related Questions